Faux columns save the day!

I was trying to get a two column layout ready, but the left div (the sidenav) would not display nicely in IE or Firefox. As the sidenav had less “stuff” then the content div, it would be too short, and therefore ugly.

I was Google-ing around for “100% height divs in CSS” until I came across an obscure forum post advising to search for “faux columns”. Lo and behold.

This is the classic of course. And then I stumbled upon this.

I was trying out the 2nd one since it had all the images, css and html to play around with. And then I realized, I could do it on the sidenav instead:

#sidenav {
	background: url('images/sidenav/bg.gif') repeat;
	float: left;
}

This works perfectly well. So I removed all the extraneous CSS that didn’t work; e.g. setting the html and body heights to 100%; container divs to be block display etc.

Advertisements