Many to many mappings with Ruby on Rails

So you want layouts? You want columns that can stretch and grow and which work happily in any browser? You think tables are for losers? In this article we will expose the three best ways to achieve multi column complex layouts with css. Each of these has it's own benefits and drawbacks which we'll be covering in detail below, and each will work in all modern browsers. Crucially, each of these gives you controll of your sorce ordering, so can put more important content near the top of your page. This is great for accessibility and for SEO.

#1 The Absolutely Positioned Layout

This layout is probably the simplest of the three. It uses absolute positioning to put as many colums as you like on the screen. Basically, you just tell your columns where on the screen you want them to appear. It looks something like this:

To create an absolutely positioned layout declare a wrapper div to hold your content, then just put each of your columns inside it in a separate div like so:

Now for the CSS. Declare your wrapper div position:relative like so

Now position your columns, for each column declare a left offset and a width.

If you want to be clever, and remove the duplicate code here, see our forthcoming article streamlining your css with multiple class names (coming soon)

You now have a 3 column liquid (stretchy) layout. You can put the columns in any order you like, and you can add as many columns as you like.

Pro's and cons of the abs layout

This layout is nice and simple and practically bullet proof in any browser post IE5.01. You just tell the columns where to go and you can be pretty confident they'll stay there. The order of the columns in the source is irrelevent, the source code is entirely semantic and you can have as many columns as you like.

So, if it's so great why doesn't everyone use it? Well it turns out that the absolutely positioned layout has one unfortunate flaw. If you know your absolute positioning onions, you'll know that once you declare an element position:absolute it is taken out of the document flow and as far as the other elements on the page are concerned has a height of 0 pixels. This means that unless you know the height of your page (which almost never happens) you cannot use a full width footer with this layout. Try it if you like, you'll find it lies along the top of the screen. That said, if I can get away with it I always use this layout.

#2 Float Layouts

So your client is asking for a full width footer? The Float layout gets around some of the abs layout's drawbacks. Because it uses floats rather than absolute positioning the height of your elements is preserved so you can have a footer or even another layout underneath it. It's a bit more fiddly though so we're going to start out with a two column layout and work up. You'll need to know your floats before we start. The float layout looks something like this:

Here's how it works. As before declare a content wrapper div, then put two divs inside to contain your content like so:

Now make both columns float next to each other. (It's important both columns float so that we can reorder our columns later. You can do this with only one floated element but you lose the ability to change your source order).

and voila mon cheri, a perfect two column layout. Those among you with sharp eyes may have noticed that 30% + 69% does not equal 100%. This is deliberate as IE6.0 doesn't like float widths adding up to 100%. Try it and see, when you resize the browser the layout will 'wiggle' in a most disconcerting way.

#3 The Nested Float Layout

So, I promised you a multi-column layout and all we have here is a piddly little two column layout. That's not what you wanted, but fear not, adding an extra column while preserving source order is easy. The trick is to nest one float layout inside another like so:

The right column now contans another pair of floats. Unfortunately this does mean modifying your source somewhat with an extra div:

As you can see we've maintained source order. The problem is we now have a non-semantic floatwrapper div but this may be a price worth paying given the other benefits of this layout.

The CSS looks like this:

Because these are floats we can now add a footer. You have to make it clear the floats, so declare clear:both on it and there as promised a full width footer to make your client happy.

Pro's and cons of the float and nested float layouts

It doesn't matter which column is longest, you can still have a footer.

You can potentially have as many columns as you have room for and still maintain sorce order.

Some non-semantic code.

Less bulletproof. a wide image or non breaking word can cause a div to become too wide and drop down below the others.