Learn CSS DIVs

float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a { 
float:left; 
width:150px;
}

#div-1b { 
float:left; 
width:150px;
}

http://www.barelyfitz.com/screencast/html-training/css/positioning/ go to tab 8

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?

two column absolute height

One solution is to set a fixed height on the elements.

But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.

#div-1 {  position:relative;  height:250px; } #div-1a {  position:absolute;  top:0;  right:0;  width:200px; } #div-1b {  position:absolute;  top:0;  left:0;  width:200px; }