3-Column Layout anyone?

[David]

I'm still beavering away at version 4.0 of CADTutor and I'm close to starting serious work after an age of research, prevarication and fee-earning work. I now have a pretty much fixed sketch of the layout, navigation and look/feel for the design. Before I launch into it, I want to make sure I have the best/most suitable 3-column layout. Basically, I need left and right columns of fixed width in their own colour and a fluid central column. Plus I need a header, horizontal nav and footer. I have a mocked-up version of the page using the Pixy layout (http://www.pixy.cz/blogg/clanky/css-3col-layout/). This works well and requires no hacks but depends on background images for the full-height column effect. I want to avoid this if possible so that the whole thing can be controlled through the CSS file. I'm currently looking at the Skidoo layout (http://webhost.bridgew.edu/etribou/layouts/skidoo/) by Ruthsarian and I like this very much. The method is a bit off-the-wall for my liking but the effect is very good. The only thing I'm not sure of yet is whether it's possible to push the content of the centre column to the top of the markup (better for Google).

Anyway, if any of you have suggestions for a better method or would like to comment on these two, please do. Once I've got this wrapped up, I can start work in earnest.

BTW, if you are ever looking for a 3-col layout, I can recommend this page (http://css-discuss.incutio.com/?page=ThreeColumnLayouts).

[James]

Hi David,

I'm familiar with all those links you posted. I've been through this pain when I re-designed Freedigitalphotos and recently Tunbridge Wells Hockey Club (not live yet - will post here for comments soon).

The method I used for making the left and right columns stretch to match the center was the "faux columns" trick. It uses 1px background images to colour the columns and although it's a hack off sorts, it's effective. See http://www.alistapart.com/articles/fauxcolumns/

The main problem I encountered with CSS columns is that IE would slightly indent the main content area text at the point where the content in the left column ended. Firefox worked fine and I only solved the problem by trial and error changing of various nearby margins and padding. I wonder if you encounter this problem, it drove me mad.

[David]

I have indeed experienced that problem. See this page (http://www.websitearchitecture.co.uk/about/overview.php) on the WA site. You can clearly see the "indent" in the central column text in line with the bottom of the left column links in IE. As you say, it looks fine in Firefox. At the time, I didn't have the time to experiment, so if you have a fix, I'd love to see it. The WA site uses the Pixy layout but without the background images. I could have gone for something simpler but I wanted to build in the opportunity to change the colour in any future change to the style.

I'm going to do a mock-up with the Skidoo layout and see how that works. Judging by the example, it doesn't suffer from the IE text indent problem.

[David]

I've just been working through the stuff on the Ruthsarian site and I've discovered the best version of this layout so far. The Skidoo Too layout (http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html) has cleaner, annotated CSS and moves the central column to the top of the markup. Looks perfect, I'll give it a go.

So James, you must have used a modified Pixy layout for Freedigitalphotos?

[James]

Hi David

I cannot remember how I fixed the indenting thing, it was the result of a couple of hours trial and error with adding and removing margin / padding from nearby elements.

I love the Skidoo Too layout. I wonder how they got the left and right columns coloured, they haven't used the background image technique. I'm thinking of re-doing the hockey club site using it.

[David]

The background colour of the flanking columns is actually the border colour of the enclosing <div> the column contents then overlap this border by using a negative margin value the same as the border width. Simple, huh :blink:

Anyway, it works and it makes playing about with colours very easy - no images required.

[James]

Yeah it works, but I'm sure whoever conceived CSS didn't expect designers to have to hack about with huge borders, overlapping DIVs and negative margins. I just can't fall in love with CSS for layout, it's something I have to live with. Oh well. B)

[francis]

It sounds like the indent thing might be IE's "3 pixel jog". Naturally, PIE has it covered (http://www.positioniseverything.net/explorer/threepxtest.html). I've used faux coulums before but have just had to add a wrapper div around a load of content to style a liquid layout at work and that's working fine. Apart from the fact that I had to add a <div> purely for presentation. Oh well.

[David]

Well, I'm ploughing on with the Skidoo Too layout. I must admit that this time yesterday I was ready to scrap the whole thing and go back to the faux column method. However, I now have it under control and am close to getting what I want from it. To save my sanity, I had to draw a diagram of the page <div>s (http://www.websitearchitecture.co.uk/watson/postimages/skidoo-too.pdf) because it is rather complicated. Should anyone else attempt this, I advise having a look. The #topnav and #subfooter are my own additions. The original Skidoo Too begins with #pageWrapper - I've changed nothing inside of that (are you mad!).