Hybrid Layouts

I don’t kid myself I’m announcing anything new here but after a long fruitless Google (and Yahoo and MSN) and a search of my usual CSS haunts that also remained stubbornly fruit-free I thought that I’d better get on and build something myself.

So I did. And generous soul that I am I thought that one day, others might struggle with this same problem so I’d better document it.

What I wanted was to have a 3 column layout. Easy enough, except I didn’t want all three columns to be fixed width. I wanted 2 columns to be fixed and then a third column to spread to fill the remaining width e.g.


fixed | fixed | sttrrrrreeeetch


I also wanted something that required a minimum of hacks for IE. I guess thats pretty much what we all want all the time but I was keen to see what I could do with just plain vanilla CSS. Before we start let me clarify: its totally untested on any Mac browsers but it works in Firefox (natch), Moz, IE 6, 5.5 and 5 and Opera 7.54.

Lets start with our three columns:

Nothing unusual there apart from my frighteningly unsemantic markup. You get the idea – left and middle should have a fixed width whilst right stretches to fill the remaning width.

Having been born a rigid son-of-a-bitch I love the stability and reassuringly solid feel of a fixed width layout. Doesn’t exactly promote a feeling of adventure or trying new things though so I was determined to learn how to do this – of course it did mean pretty much starting from scratch regarding flexible (liquid, elastic, whatever) layouts.

My big challenge was understanding how to get #right to start to the right of #middle and yet still have it stretch without putting extra pixels on the screen and creating the HSOD (Horizontal Scrollbar Of Death). So, first I did the easy bits – creating the CSS for the two fixed columns:

Easy. Two columns, snug up against each other and both floated left.

Now, to add the third, liquid, column would mean I had to place it in such a way as it lined up against #middle but not actually be 100%. If I declared that element as 100% then I’d get HSOD. Either that or it’d shove the other two out the way.

Now, I could’ve gone and declared everything as position: absolute; but I hate taking elements out of the document flow unless there’s no choice so what I did was this:

The clever bit being the margin-left: 400px; which makes the element shift itself 400 pixels to the right. Nice. Quite straightforward and requiring no hacks to work across Windows browsers. Be nice if you Mac geezers out there would let me know how it works out for you.

So, there we go. Hardly earth shattering but represents a breakthrough for me moving away from fixed layouts. You can view the finished layout here.