Picnic Website Code Tutorials

CSS3 Faux Columns Tutorial

3/18/2013

View Demo

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>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top 5 Donators

Friends of Mine