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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s