Positioning and floating
« Previous: display | Next: Conclusion »
By now we’ve achieved a great deal of control over the appearance of our page elements, but our pages are still stuck in a linear layout - each element simply follows after the next in the same order as they are written in the HTML. However, CSS allows us to create sophisticated and versatile page layouts using two properties: position and float.
position
The position property controls how an element is positioned on the page. It can take the following values:
static: the element stays within the normal flow of the document: it appears on the page according to where it is placed in the HTML, and surrounding elements clear a space for it. This is the default behaviour.
| Code | Output |
|---|---|
<p>I'm a normal paragraph</p> |
I'm a normal paragraph I am statically positioned by default I'm another normal paragraph |
relative: this keeps the element within the flow of the document, but it can be shifted relative to its normal position by specifying a horizontal or vertical distance, using any of the properties top, left, bottom and right:
| Code | Output |
|---|---|
<p>I'm a normal paragraph</p> |
I'm a normal paragraph I am relatively positioned! I'm another normal paragraph |
The surrounding elements still clear a space for the relatively positioned element, but they clear the space that it would have occupied before it was moved. This means that it can overlap other elements if you shift it more.
Note: when positioning elements, you can use top or bottom, but not both. Similarly with left or right.
absolute: this takes the element out of the normal flow of the document, and surrounding elements will behave as if it wasn't there. The location of absolutely positioned elements can be specified using the properties top, left, bottom and right:
| Code | Output |
|---|---|
<div style="position: relative"> |
I'm a normal paragraph I am absolutely positioned! I'm another normal paragraph |
If the absolutely positioned element is inside an element which is positioned absolutely or relatively, it will be positioned relative to this container. Otherwise, it will be positioned relative to the page itself.
fixed: similar to absolute, except that the element is positioned relative to the browser window, and so stays in the same place, even when the user scrolls up and down the page. Very cool. Not supported in Internet Explorer 6 and earlier. 
While absolute and relative positioning can be very useful in laying out page elements, they also run the risk of causing elements to be plonked on top of each other. This can be avoided by setting margins for the surrounding elements:
| Code | Output |
|---|---|
<div style="position: relative"> |
I'm a normal paragraph I am absolutely positioned! I'm another normal paragraph |
float
Floating allows you to shift elements to the left or right of their container. Surrounding elements will then flow around them.
| Code | Output |
|---|---|
<p style="float: left; width: 10em; background: #cf9">This paragraph is floated <strong>left</strong></p> |
This paragraph is floated left The contents of this paragraph now flow around the floated box. |
<p style="float: right; width: 10em; background: #cf9">This paragraph is floated <strong>right</strong></p> |
This paragraph is floated right The contents of this paragraph now flow around the floated box. |
clear
The clear property prevents elements from flowing around floated boxes. It can take the following values:
- left - the element clears any left-floated boxes
- right - the element clears any right-floated boxes
- both - the element clears any floated boxes
- none - the element flows around floated boxes. This is the default behaviour.
| Code | Output |
|---|---|
<p style="float: left; width: 8em; height: 8em; background: #cf9">This paragraph is floated <strong>left</strong></p> |
This paragraph is floated left The contents of this paragraph flow around the floated box. This paragraph clears the floated box. |
Unfortunately, many of Internet Explorer’s most bizarre and inexplicable bugs seem to reveal themselves in more complex floated layouts, and several of these bugs have not been fixed in version 7: elements within or in the vicinity of floats can reposition themselves, disappear entirely, jump to the left when a neighbouring element is hovered over, or otherwise go wrong in many other weird and wonderful ways. For this reason, you should always make sure to test any floated layouts in IE as well as a standards-compliant browser.