CSS3 Faux Columns Tutorial
Works perfect in all modern browsers IE8+. Lets say your half way through your project (as I was). You've already recoded 500+ pages and now you realize your sidebar is getting longer than your main content div on half your pages. Well that doesnt look good. So the usual solution is to create equal height columns so your main content div is always at minimum the same height as your sidebar (or vice versa). An incredibly easy solution is to simply add a faux column using #wrap:before as I did. Here is how. FYI, the main div on this site is using this solution.
CSS
#wrap {
position:relative;
width:500px;
height:500px;
overflow:hidden;
}
#wrap:before { /* faux column */
content:'';
position:absolute;
top:0;
bottom:0;
left:0;
width:250px;
background:blue;
}
#wrap div {
float:left;
width:250px;
position:relative;
}
#wrap div+div {
background:red;
height:500px;
}
HTML
<div id="wrap"> <div>text</div> <div>text</div> </div>
