Implementation
Methods for Using CSS Page Layout
Absolute Positioning
position: absolute; top: 30px; /* 30 pixels from the top of the page */ left: 80px; /* 80 pixels from the left hand side */ width: 100px; /* Always set a width for absolute positioned block level elements, such as divs */ border: 1px solid red; /* So we can see what is happening */ }
The key things to note are that a width is, while not required, a very good idea, and that you can use any pair of positioning properties. You could, for example, use top: 30px and right: 10px to have an element appear in the top right hand corner of the screen.
Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this.
Measurements
While the example above uses pixels, it is also possible to position things using em and percentage units. These have their own advantages and disadvantages. Ems are a very useful measurement as, unlike pixels, they change their size depending on the font size the user has selected. Ems should be considered whenever pixel perfect design accuracy is not required. Note however that if you are positioning things in a design that uses decorative images pixels are more or less essential, as image sizes do not change when the user scales their font.
Relative to what, exactly?
The CSS2 specification tells us that an absolute positioned element is "assigned a position with respect to a containing block". This is not particularly clear - what it actually means is that the element is positioned with respect to the "nearest" containing block that is itself positioned using either position: absolute or position: relative. This defaults to being the body or html element (depending on who you talk to), so the usual result is that the element will be positioned relative to the overall page. It does, however, introduce a very useful trick for positioning elements relative to some other element on the page...
Say for example you want to display a small question mark on the right hand side of a header somewhere, but you don't know where in the page that header will appear (this is a slightly contrived example but it will do for demonstration purposes). Consider the following:
h3 {position: relative;
/* So that elements INSIDE this header can be positioned relative
to the header */ }
h3 span { position: absolute;
display: block;
/* So we can give the element a width */
top: 3px; right: 3px; width: 10px; }
<h3>Some header <span>?</span></h3>
The position: relative on the h3 allows the span (which is inside the h3) to be positioned relative to the containing header, rather than the overall page.
This technique can produce mixed results different browsers (mainly IE), so it's a good idea to test extensively if you use it.
Using position: absolute for layouts
Using position: absolute, simple but powerful layouts of both two and three columns can be easily achieved. In fact, there is no reason to limit yourself to column layouts but since those are the most widely requested they are the ones covered here.
The key trick to creating layouts with absolute positioning is that you do not need to use position: absolute on everything. Instead, you can create space on the page by applying margins, then use absolute positioning to "fill" that space.
2 Column Layout
div#main {margin-left: 20%; /* Create space on the page for the menu */ }
div#menu { position: absolute; top: 1em; left: 1%; width: 17%;
/* Must be less than 20% or the menu may overlap the content */ }
<div id="main">
<p>Some Content goes here</p>
<p>content goes here</p>
<p>content goes here</p> </div>
<div id="menu"> <p>the menu</p> </div>
3 Column Layout
div#main {margin-left: 15%;
/* Space for the left menu */
margin-right: 15%;
/* Space for the right menu */ }
div#menu1 {position: absolute; top: 1em; left: 1%; width: 13%; }
div#menu2 { position: absolute; top: 1em; right: 1%;
/* Because top and right are defined, appears in top right*/
width: 13%'}
<div id="main">
<p>content goes here</p>
<p>content goes here</p>
<p>content goes here</p>
</div>
<div id="menu1">
<p>the left hand menu</p> </div>
<div id="menu2">
<p>the right hand menu</p>
</div>
Watch out for overlaps!
The single biggest potential problem with absolute positioning is that, if you aren't careful, absolute positioned elements can overlap unpositioned (or even other positioned) elements on the page. The margin technique is the most widely spread method of avoiding this, and has a very good track record.
Advantages of Absolute Positioning
- Full control over where elements are positioned on the page - much more control than is possible with tables.
- The order of the divs in the HTML source code doesn't matter - once something is absolute positioned it is "pulled out of the flow" of the document, so it can be placed pretty much anywhere in that document. This allows you to have your content before your navigation structures, which is good for accessibility and good for search engine optimisation.
Disadvantages of Absolute Positioning
- Elements can end up overlapping if due care is not taken - especially when the user dramatically resizes the page.
- The footer problem. If you have a layout which uses absolute positioning for one of the columns, there is no way of creating a footer that spans the whole of the bottom of the page without risk of it being overlapped by the absolutely positioned column should that column be longer than the non-positioned column. The solution is either to ensure the static column has more content than the absolute positioned one, or to restrict the footer to taking up space at the bottom of the static column rather than spanning the whole page.
Float basics
What is a float?
When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are "float: left", "float: right" or "float: none".
A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box.
You can also put several floats beside each other. 
Where will a floated element move to?
Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.
If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.
Do floated items need a width?
You should always set a width on floated items (except if applied directly to an image - which has implicit width). W3C's Cascading Style Sheets, level 2, CSS2 Specifications states:
If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.
Elements above and below floated elements
Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element:
Borders, background images and background color
While content will wrap around a floated element, border, background image and background color will extend underneath.
If you do not want elements below a floated element to wrap around it, you can apply the clear property to the following element using "clear: left", "clear: right" or "clear: both".
Floats and "clear"
Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are "clear: left", "clear: right", "clear: both" or "clear: none".
clear: left
The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
clear: right
The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
clear: both
The element is moved below all floating boxes of earlier elements in the source document.
