Three column layout with full page height

14 Jun
2007

The final result

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

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

first.css

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

first version

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

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

second version

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

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

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:

third version

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

small screen

The full code

Putting all together, this is what we get:

3.html

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

Would like to share? These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Reddit
  • Facebook
  • Google Bookmarks
  • Ma.gnolia
  • TwitThis
  • LinkedIn

3 Responses to Three column layout with full page height

Avatar

frank

July 5th, 2007 at 11:06

great result

it would be interesting to mix it with a fix image-background

Avatar

bob

August 13th, 2007 at 18:26

There are some problems with this method, documented here:

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

It’s a damn shame, it’s very close to the holy grail.

Avatar

david

August 13th, 2007 at 18:35

That’s true, Bob.

I’ll keep on searching for The Definitive One

David

Comment Form

top