HTML and CSS Reference
Browsers place elements in a page using flow.
There are four values the position property can be set
to: static, absolute, fixed, and relative.
Block elements flow from the top down, with a linebreak
between elements. By default, each block element takes
up the entire width of the browser window.
Static positioning is the default, and places an element
in the normal flow of the page.
Inline elements flow inside a block element from the top
left to the bottom right. If more than one line is needed,
the browser creates a new line, and expands the
containing block element vertically to contain the inline
Absolute positioning lets you place elements anywhere
in the page. By default, absolutely positioned elements
are placed relative to the sides of the page.
If an absolutely positioned element is nested within
another positioned element, then its position is relative
to the containing element that is positioned.
The top and bottom adjacent margins of two block
elements in the normal page flow collapse to the size of
the larger margin, or to the size of one margin if they are
the same size.
The properties top, right, bottom, and left are used
to position elements for absolute, fixed, and relative
Floated elements are taken out of the normal flow and
placed to the left or right.
Absolutely positioned elements can be layered on top of
one another using the z-index property. A larger z-index
value indicates it is higher in the stack (closer to you on
Floated elements sit on top of block elements and don't
affect their flow. However, the inline content respects the
boundaries of a floated element and flows around it.
Fixed-position elements are always positioned relative
to the browser window and do not move when the page
is scrolled. Other content in the page scrolls underneath
The clear property is used to specify that no floated
elements can be on the left or right (or both) of a block
element. A block element with clear set will move down
until it is free of the block element on its side.
Relatively positioned elements are first flowed into
the page as normal, and then offset by the specified
amount, leaving empty the space where they would
A floated element must have a specific width set to a
value other than auto.
A liquid layout is one in which the content of the page
expands to fit the page when you expand the browser
With relative positioning, left, right, top, and bottom refer
to the amount of offset from the element's position in the
A frozen layout is one in which the width of the content
is fixed, and it doesn't expand or shrink with the browser
window. This has the advantage of providing you more
control over your design, but at the cost of not using the
browser width as efficiently.
CSS table display allows you to lay out your elements in
a table-like layout.
To create a CSS table display, use a block element
for the table, block elements for the rows, and block
elements for the cells. Typically, these will be <div>
A jello layout is one in which the content width is fixed,
but the margins expand and shrink with the browser
window. A jello layout usually places the content in the
center of the page. This has the same advantages as
the frozen layout, but is often more attractive.
Table display is a good layout strategy for multicolumn
layouts where even columns of content are needed.