Home

 

 

CSS Block Size & Positioning

  • Any element can become a block element by setting display:block;
  • Any element can become a block element by setting display:block;

width

  • number+px | number+% | auto | inherit
  • .container { width:80%; }

height

  • number+px | auto | inherit
  • .container { height:50%; }

float

  • Moves an element to the left of the container. If an element precedes it, it floats to the edge of that item.
  • left | right | none | inherit
  • .left-div { float:left; }

clear

  • Pushes element in specified direction to the next line.
  • left | right | both | none | inherit
  • #footer { clear:both; }

margin

  • Determines inset space of outside edge of element.
  • margin-top | margin-right | margin-bottom | margin-left

padding

  • Specifies inset from inside edge of container.
  • padding-right | padding-bottom | padding-left | padding-top

max-width | min-width | min-height | max-height*

    Note: does not work in IE - see workaround below
  • .class { max-width: 640px;}

    <[! --[if IE]>
    .class { width: expression(this.width > 640 ? 640: true); }
    < ![endif]-->

position

  • absolute | fixed | relative | static | inherit

visibility

  • visible | hidden | inherit

width

height

left

  • number+% | number+px | auto | inherit

top

  • number+% | number+px | auto | inherit

right

  • number+% | number+px | auto | inherit

bottom

  • number+% | number+px | auto | inherit

z-index

  • Layers of an absolutely position element. There are more numbers, but Firefox uses number 0-999.
  • Note: If IE and you have two relatively positioned elements with two different z-Indexes, IE appearsto ignore this. You need to have both elements in the same relative container for z-index to work.

clip

  • number+px | auto | inherit

overflow

  • overflow-x | overflow-y
  • visible | hidden | scroll | number+px | auto | inherit

List

list-style-type

  • disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit

list-style-image

  • css property used to set the bullet to a custom image
  • .bull-list { list-style-image:url(images/someimage.jpg); }

list-style-position

  • inside | outside | inherit

Mouse

cursor

  • crosshair | text | wait | default | help | e-resize | ne-resize | n-resize | nw-resize | w-resize | sw-resize | s-resize | se-resize | number+px | auto | inherit

Print

page-break-before

  • auto | always | avoid | left | right | inherit

page-break-after

  • auto | always | avoid | left | right | inherit

 

opacity | filter:alpha(opacity=50)

  • opacity is for mozilla browsers, filter:alpha is used for IE
  • transbox { opacity: .5; filter: alpha(opacity=50); }

caption-side

  • top | bottom | left | right | inherit

empty-cells

  • show | hide | inherit

table-layout

  • auto | fixed | inherit

content

marker-offset

  • number+px | auto | inherit

quotes