Three column fixed layout

[David]

OK, I admit I only spent about an hour with this but I came absolutely no where near close to getting what I wanted.

I'm trying to replicate the table-based layout at the fabrik website (http://www.fabrikuk.com/index.php) using CSS layout techniques.

These days, any fool can create a liquid, three-column layout. That "holy grail" of CSS design is now well documented all over the web. This (http://www.positioniseverything.net/guests/3colcomplex.html) is a good example of the level of support for this sort of thing.

But what about a fixed width, centred, 3-column design - anyone? Nope.

Sadly I really don't have the time to persue this. There's a devil on my shoulder saying...

:devil: "...and why should you? Your client doesn't care. The site looks identical in all browsers. Leave it as it is!"

And an angel on the other shoulder saying...

o:) " ...you know you should be building valid sites. It's the right thing to do. Can you live with yourself?"

Erm, I think I probably can ;)

[Tom]

I think I'll try CSS for layouts in about 5 years time. Thanks for the cautionary tales.

[francis]

Floats. That's what you need to achieve the effect you're after. This (http://www.websitearchitecture.co.uk/storr/forumimgs/fabrik-css/) took me 40 minutes (the last 15-20 were just fiddling around trying to get the text to line up perfectly with your design). I was going to do this a couple of days back but decided against it. But seeing as you 'asked' :D

David, where do you get your images from?

[David]

Francis, that is a beautiful solution.

It took me a few moments after having read your CSS code to work out what was happening. I couldn't believe that all 3 "columns" had been given the same styling. Presumaby, having them all "float:left" means that they all stack against one another horizontally. I would never have thought of that. I tried "display:inline" hoping for the same effect but...

I wish CSS was more intuitive. I find it very unpredictable and often find myself just trying something in the hope that it will do what I want. Oh well, a few more scales have fallen from my eyes - thank you.

The images are my own photographs. I've always been a keen photographer but don't have that much time to indulge. All the images I used were taken in the last 2 years with my Olympus E-10. I have a large collection of images that I use for web design as required - don't tell James ;)

[francis]

Heh, thanks. Yep - floating will line up all three divs next to each other. The W3C used the same principle when they redesigned their homepage in 2002 (http://www.w3.org/2002/11/homepage). Floats can be a bit of a nightmare sometimes, but that was a pretty straightforward layout. The PIE stuff is scarily complicated! Eric Meyer (http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/) and Douglas Bowman (http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html) have just come up with a method of generating multiple columns of equal height and variable width. Haven't read the articles yet, but one of them should be bookmarked, I feel.

Your photos are excellent - I especially liked the pistachio nuts.

[James]

Francis, which bit in the CSS makes the site centered? Is it the AUTO attribute on the container for the right and left of the container? I was surprised to see no IE hacks in this one - I understood most of it!

[David]

(not Francis)

Yes, margin:38px auto 10px auto; gives auto margin width to the left and right of an object. The result is a centred object.

Make sure you get the order right when setting different padding, border and margin values in a single declaration.

margin: top right bottom left; in that order.

You can also do this if top and bottom are the same and left and right are the same:

margin: top/bottom right/left;

e.g. margin: 25px auto;

[francis]

I've just stripped out a couple of unneeded position:relatives; from the CSS, so if you've taken it, take it again.

The easiest way to think of the 4 settings for margin and padding is like a clockface:

12, 3, 6, 9 = top, right, bottom, left

David mentioned changing this to paired declarations - you can also thave three:

margin: 0 auto 1em;

Which works out as top, left+right, bottom, so the top is 0, left and right are both auto and the bottom is 1em.

[David]

I tell you what, I'm feeling a whole lot better after reading that Meyer article (http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/). Even Eric has to admit that there are 10% of page layout designs that can only be done with tables. He's also the first voice in the CSS camp I've heard admit that if you have to resort to lengthy CSS markup in place of a simple table, you might be trying too hard.

Not the case with the Fabrik site. Francis' solution is elegant and simple - even I will admit that it's better than tables.

By the way, I was impressed to see that Meyer uses WordPress (http://www.wordpress.org/) for his blog, the same software I chose for the Fabrik Journal (http://www.fabrikuk.com/journal/index.php). I spent just over a day hacking the original install to get what I wanted and am very pleased with it. I had to laugh at Erik's comment on his page footer:

"Thoughts From Eric" powered by the übercool WordPress, albeit an install I've hacked like it was attacking my family.

:lol: