Nathanael Boehm (Canberra, Australia) web user interaction designer

Posted by Nathanael Boehm on October 27th, 2005 in Uncategorized

One of the great things about the job I have is that I generally have as much time as I need to get something done properly, and to do as much research and development as required. I’m not saying I waste time or that I have a low pressure job - but I am allowed to manage my own time, and deadlines are generally quite generous.

So today when I had to turn an OSVD’s fixed width visually intensive design into a liquid 3 column layout I was quite justified in spending several hours on trying to get the the layout working nicely, both in Internet Explorer (IE) and Firefox … that is of course on top of all the other massive amounts of CSS coding required to get this 1995 era site design to semantic XHTML compliance (the designer in question gave me a Photoshop file, and his “site” which he’d generated out of Photoshop, complete with nested tables and spacer GIFs).

So I now have a template for this layout which has been thoroughly tested (I refreshed both browsers over a dozen times whilst bouncing up and down in my chair screaming “YES!!” after finally getting it) and DOES WORK. I say this because I tried several other layouts that people have posted on the Internet which do NOT work.

Just to prove that this does work, have a look at my sample page.

Ok, so how does it work?

Well if you look in my source code for the sample page, you’ll see I’ve commented out a big block of CSS. That’s because I originally did it like this:

but I had to change to this:

because for semantic reasons I wanted what is displayed as the right column to actually come before the center column in my HTML.

But basically all it is is a container DIV, within which is a column (either left or right) which is absolutely positioned (make sure you set position:relative on your container). The other two columns go within an inner container, which has float set to either left or right, and display: inline.

Now with the second layout above, this wouldn’t have worked if I had wanted the columns in the order 1, 2, 3 instead of 1, 3, 2 … this is because float: right doesn’t float to the right at the same level (vertically) as it’s previous element - it has to be placed in your HTML before the element you want to float to the right of (although I’m sure with a bit more tweaking it would work for that case also).

Here is the CSS for the second layout mode:


#container
{
margin: 3em auto;
width: 80%;
height: 80%;
position: relative;
}


#innercontainer
{
height: 100%;
}


#left
{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 100%;
}


#center
{
margin-left: 205px;
margin-right: 205px;
}


#right
{
float: right;
width: 200px;
margin-right: 0;
display: inline;
height: 100%;
}


I’ve used fixed widths for my side columns, but I guess you could use percentages if needed - shouldn’t be too hard. Also note I’ve added height: 100% to the side columns - this is optional, but I needed everything to touch the bottom in order to *sigh* fit in with the design I had been given.

Oh, and a work colleague Damo also did some work on this, and came up with a slightly different solution which may be more appropriate for your needs, so go have a look.