View Full Version : Almost giving up on CSS 3 Column Layout

08-14-2010, 06:54 PM

The last few days I've been trying to make a 3 column layout using CSS, with the left and right column being fixed width, and the center NOT fixed, so it stretches the users screen.

I used a tutorial dubbed "The Holy Grail" to achieve it:

And although it works perfect, its not very pratical. If I want to add padding to the center, I've got to alter the left and right columns widths in my CSS to compensate, and I'm finding I'm just adding lots of divs with padding I am constantly re-working the whole layout, and it's just getting messy.

Does anyone else find a 3 column layout, with a fixed left and right column, but a center column that strectches isn't very pratical with CSS.. or is it just me? Maybe there are better ways to achieve it now? (the tut above was in 2006). Otherwise, I'm seriously thinking about just doing it in tables with HTML. I could do it all fixed width in CSS but I like the idea of trying stretching the screen....

08-14-2010, 07:11 PM
Have a look at this approach: http://bonrouge.com/3c-hf-fluid.php. Don't go down the tables route...

08-14-2010, 08:12 PM
Thanks for your reply. However although this is a different method, there isn't a lot of modifying you can do with like the other tut I mentioned. For example, if I want to add a 10 pixel margin around the whole page, when I put this in the CSS body, it only gives a margin on the left of the page and the top of the page, although NOT the above the right column, none down the right side and none down the bottom. Plus, becasue I want a margin so I can have a background image behind it, this isn't possible because the background colour and center column colour have to be the same as they are controlled in the same field! I also want seach section (header, left, center, right, footer) to have something like a 15px gap between each other, so they are not joining. Who knows how this is even possible!!! I'm sure this, and the other tut could work if you are an expert, but otherwise this is very limiting.

08-14-2010, 10:31 PM
To be honest you would probably be better off giving up. If you get it to work, it will require a hack that won't display properly on a lot of mobile devices (BlackBerry's for sure). And with that 10000px padding or margin or whatever hack you use it just makes it less friendly to edit and read. Like you said, it's a pain to modify any of the working hacks.

The solution when I ran into this problem was to come up with a more creative way to format the layout. You don't HAVE to do what you are trying to do.