Negative Margins On ALA

ALA has an article up on the “holy grail” of CSS layouts. It’s a 3-column CSS-based layout that uses negative margins to pull the 3 columns into place.

This may sound familiar.

Unfortunately, this article uses an approach that over-complicates things, is buggy under some browsers, and misses the advantages of a negative margin layout.

For example, the article talks about using padding, not borders, to reserve the space for the side columns. It then goes on to use a really ugly hack to pull of equal height columns.

With skidoo the trick is to not force the three columns to equal height but rather to fake it. Use borders, not padding, to reserve the space for the side columns and apply a color to the borders which acts as a background color for those side columns. It gives the appearence of 3 columns of equal height regardless of which is tallest.

But rather than fake it, this article goes all out to push each column to the same height. How.. well, let’s look at some of the code here:

#container {
overflow: hidden;
#container .column {
padding-bottom: 20010px;  /* X + padding-bottom */
margin-bottom: -20000px;  /* X */
#footer {
position: relative;

If you ever have a column longer than 20,000 pixels (think a really really long article) then your layout breaks using this technique. skidoo does not have this limitation.

Doug Livingstone figured this out a long time ago. And his work inspied the PIEfecta layout Which is what makes the latest PIE article all the more surprising. It uses the hacks outlined in this ALA article, rather than the simpler approach PIE demonstrated 2 years ago.

A lot of the bugs users bring up in the comments on the ALA article are bugs which have long since been resolved.


This article is great for it’s very easy to follow demonstration of how and why this approach works. I can type till my fingers fall off about how the negative margin approach works, but the visual aids supplied in the article offer a nice and easy way to follow the logic.

There’s some creative ways to achieve padding within columns without added markup. I think that might be worth going over. I may have to try make a second attempt at plaine with that and go for three-columns too.

Okay article, but there’s better ways to do the 3-column “holy grail”.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s