Document Flow and CSS Positioning

When a browser begins to render an HTML document, it starts at the top of the window and works its way down through the document's contents, allocating space as needed. Unless the size of the document is specifically limited by a CSS instruction, the browser expands the document vertically to accomodate all of the content. Each new block-level HTML element (DIV, P, TABLE, FORM, etc.) is rendered on a new line. Inline HTML elements (IMG, SPAN, INPUT, etc.) are rendered horizontally as they are encountered until the current line reaches the document boundary, at which point rendering is continued on the next vertical line. This is called normal document flow. Note how BLOCK LEVEL ELEMENT 1 below is automatically expanded vertically to accomodate the space required to display the additional inline elements it contains compared to BLOCK LEVEL ELEMENT 2.

Normal Document Flow

The code above is a parent containing <DIV> with a yellow background, and two child <DIV>s with black borders. Again, note that elements that you assign relative positioning are rendered with respect to their default position within the normal document flow - higher or lower, further left or right - as you choose. As each relatively-positioned element is rendered, space within the document is allocated to it. Block-level elements force the start of a new "line". That is, the rendering of a new block-level element begins at the next line down. Inline elements are rendered on a single line until the edge of the document is reached, at which point a new line is started and rendering continues. Notice that the parent containing <DIV> was automatically expanded vertically to accomodate the child <DIV>s.

A key to understanding the difference between aboslute positioning and relative positioning is that elements with absolute positioning are removed from the normal document flow. That is, their presence in the document does not affect where elements that have relative positioning are rendered within the document, and no space for them is automatically allocated as it would be for elements using relative positioning. Elements assigned absolute positioning are positioned with respect to their parent positioned element.

Relative Positioning

In the example above, the bottom <DIV> BLOCK LEVEL ELEMENT 2 was assigned a CSS style setting of "position:relative;", but with added positioning settings of "top:5px; left:15px;" to move it from it's normal position within the normal document flow. As you can see, it overflows the outer boundary of the parent positioned <DIV> with the yellow background, even though space for it had been allocated, as normal, in the parent containing <DIV>.

Absolute Positioning Example 1

(the wrong way)

By changing the CSS to "position:aboslute;", BLOCK LEVEL ELEMENT 2 is now removed from the normal document flow and the browser does not allocate space for it within the document. Because of that, it is positioned in relation to the parent-positioned element (the <DIV> with the yellow background), and overwrites BLOCK LEVEL ELEMENT 1 - creating a mish-mash. If you see this kind of effect in your documents, it means that you have either not properly assigned a CSS position setting for the parent containing element, or you have not properly allocated space for it within your document.

Absolute Positioning Example 2

(the right way)

Therefore, the key when you use absolute positioning is that you must allocate space for those elements within the document yourself with your CSS settings. In this case, we do it by adding an explicit setting for "height" to the parent-positioned element (the <DIV> with the yellow background), and setting an appropriate "width" and "height" setting on the "position:absolute;" BLOCK LEVEL ELEMENT 2.

One last thing that really should come first: You should always use a complete <!DOCTYPE> statement at the start of all of your pages to force browsers into Standards-Compliance mode. The original browser wars between Microsoft and Netscape brought with them an enormous number of differences in how browsers interpreted Cascading Style Sheets and other HTML. Sanity prevailed when the browser makers all started to work toward compliance with the W3C standards, but to accomodate legacy code that had been built over the years, browsers default to their older methods unless a complete <!DOCTYPE> is used to signal them to use their compliant methods. See the Microsoft Developer Network Library for more information on the history of their Box Model and CSS Positioning in general, and how to choose and use a complete <!DOCTYPE> statement that's best for your pages.

For complete technical details, see the W3C documentation on The Box Model, and Positioning Elements with CSS. You'll also find the Index of HTML Elements handy for determining whether an element is a block-level or inline, and the CSS Property Index as your source for using CSS settings properly.

Rainbo Design's CSS Tutorials© are provided free of charge. If you use and enjoy this information, I would appreciate it if you would place the following link on your site:

<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tools for Webmasters</a>

The button below will allow you to download a .zip archive containing all of the files in this package. Just install them in their own directory on your computer.

Return to Main CSS Tutorial Page