Three column layout with full page height

David Pardo — Thu, 14 Jun 2007 19:36:56 +0000

Sometimes I wish I could do things that were easily done with table-based layouts but quite hard using just CSS.
Following a couple of posts in a CSS related Spanish mailing list (Ovillo), a guy called Zafonic showed me how to use negative margins and positive paddings to make equal sized columns. With a couple javascript functions, I patched it to fill the full browser window. Let’s see how…
Update: Error in code solved. Thanks to the testers

The problem

We’re going to write a three-column plus footer layout that covers all the browser space. The requisites are the following:

The three columns will have different background colors
We’re not going to use background images (so, no faux-columns)
We want the page to cover the full height of the browser. So, the footer will be at the bottom of the screen.
The layout has to degrade gracefully for javascript disabled browsers
All the code has to be valid and accesible

The beginning

The first part is simple. We need some html that defines three columns and a footer. Lets wrap the three columns within a div (called, by the way, container) and call the three columns col1, col2 and col3. The html code will be something like:

body.html


	
		
			first column
-
-
-
-
-
-
-
-
-
-
-
-
-
-

		
		
			second column
-
-
-
-
-
-
-
-
-
		
		
			third column
-
-
		
	
	 footer
-

We need to give the columns a width and float them to the left. The css would be:

first.css

body{
	margin:0 auto;
}
#col1{
	background-color:red;
	width:20%;
	float:left;
}
#col2{
	background-color:blue;
	width:60%;
	float:left;
}
#col3{
	background-color:yellow;
	width:20%;
	float:left;
}
#footer{
	height:40px;
	clear:both;
	background-color:black;
	color:white;
	width:100%;
}

So, we already have a three column layout, but each column has a diferent height and the footer is far from the bottom:

Negative margins to the rescue

As I already told you, I had’t heard about creating layouts using negative margins (I should have read this article from A List Apart some time ago). In a nutshell, it says that you can use a large negative margin and the opposite positive padding to “make room for the columns”. I recommend to read it if you haven’t, it’s very useful.
So, let’s go on the code. We’re going to add a -5000 pixel margin-bottom and a 5000 pixel padding-bottom to each column:

second.css

body{
	margin:0 auto;
}
#col1{
	background-color:red;
	width:20%;
	float:left;
	margin-bottom:-5000px;
 	padding-bottom:5000px;
}
#col2{
	background-color:blue;
	width:60%;
	float:left;
	margin-bottom:-5000px;
 	padding-bottom:5000px;
}
#col3{
	background-color:yellow;
	width:20%;
	float:left;
	margin-bottom:-5000px;
 	padding-bottom:5000px;
}
#footer{
	height:40px;
	clear:both;
	background-color:black;
	color:white;
	width:100%;
	margin-bottom:-5000px;
 	padding-bottom:5000px;
}

This way we get same height columns. This looks much better:

but we don’t have 100% height yet. Internet explorer supports 100% height but all the other browsers don’t. So, we’ll need to use javascript to solve it:

Filling the screen – Here comes Javascript

The first thing we need is to find the height of the browser window. I use a small javascript function that takes into account the diferent behaviours of the different browsers:

height.js

function windowHeight(){
	var alto= 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		alto= window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		alto= document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		alto= document.body.clientHeight;
	}
	return alto;
}

This function returns the height of the browser window. It does one thing and does it well… Using this new knokledge, we can set the height of the columns, making them the browser’s window height minus the footer, to fill the screen completely. The other function we’ll need is:

fill.js

function fillthescreen(){
	winH = windowHeight(); //This returns the screen heigth
	heightNeeded=winH-40; //We need to substract the footer height
	if( typeof( window.innerWidth ) != 'number' ) { //Explorer doesn't recognize minHeight
		document.getElementById('co11').style.height=heightNeeded+'px'; //So, we use height (and explroer bug)
	}
	document.getElementById('col1').style.minHeight=heightNeeded+'px'; //For every other browser, we use minHeight
}

This function works by calling the last one (windowHeight) and substracting the footer size. If we’re in Explorer, we use style.height to modify the height of the columns and in all other browsers, minHeight, since Explorer doesn’t support that attribute. We’re going to call that function via onload.
And we get this:

If the window is not tall enough to fit the column height, the page behaves normally:

The full code

Putting all together, this is what we get:

3.html





Demo three columns





	
		
			first column
-
-
-
-
-
-
-
-
-
-
-
-
-
-

		
		
			second column
-
-
-
-
-
-
-
-
-
		
		
			third column
-
-
		
	
	 footer
-

If you use it in a production environment, it’d be wise to split the javascript and the CSS into their own files, and review all the code, since it’s done in a quick and dirty way.

You can download the code using this link. People without javascript don’t get the full height but the site is equally usable and visually pleasant. I you have any further questions or just want to talk, drop me a line to david@corunet.com