Learn CSS Positioning in Ten Steps
This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.
Positioning Exercises
5. two column absolute
Now we can make a two-column layout using relative and absolute positioning!
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.
But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?
id = div-before
id = div-1
id = div-1a
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
id = div-1b
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
id = div-1c
id = div-after