homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Does a 3 column CSS template exist?
Need left and right columns to stretch according to middle column

 12:42 pm on May 10, 2007 (gmt 0)

Hey everyone,

I have been looking everywhere for a template that will work for me. I'm fairly new to tabless designs but I have built a couple now and they are working great! I have another website that will need converting to a tabless design. The problem is that it has three columns. The left and right will need to stretch according to the middle column and if for some reason the middle column is shorter than either the left column, it will stretch to meet up at the bottom.

Is this possible? I have yet to find a CSS template that will do this.

Can anyone direct me to a template that will work?

Thanks in advance for your help!




 12:51 pm on May 10, 2007 (gmt 0)

It's important to differentiate here between a 3-column CSS layout that does what you want, and a 3-column CSS layout that does what you want and works in IE. For example, given this HTML:

<div id="wrapper">
<div id="left"></div>
<div id="centre"></div>
<div id="right"></div>

You could easily say:

#wrapper { display: table; }
#wrapper>div { display: table-cell; }

Or at least, could do if you didn't care about IE's lack of compatibility. So what else can we do? Standard block level elements won't resize themselves to line up with other elements so we're generally reduced to using faux columns. This is a technique where you apply a background image to your container that tiles vertically, and emulates the background colour of your columns. For example, assuming you've got similar code to the above and the CSS already in place for you columns you'd do something like:

#left { background: red; }
#centre { background: green; }
#right { background: blue; }
#wrapper { background: url(faux_columns.png) repeat-y; }

Where faux_columns.png was as wide as the wrapper, 1 pixel tall and had blocks of colour to the same widths as your columns.


 12:54 pm on May 10, 2007 (gmt 0)

Hmmm, sounds like a standard 3 column. Try this:

#wrapper { width: 100%; overflow: auto; }

#left { float: left; width: 200px; }

#centre { margin: 0 150px 0 200px; }

#right { float: right; width: 150px; }

<div id='wrapper'>
<div id='left'>This should be on the left</div>
<div id='right'>This should be on the right</div>
<div id='centre'>This should be in the middle</div>

As for making the middle column stretch, you can't, but assuming it's for a background colour or image, use something called faux columns and apply the effect to #wrapper.

Speaking of wrapper, width 100% is default, and overflow auto won't do anything without a height. So basically this is almost pointless. But it causes #wrapper to contain floated children, i.e. your left and right. Without it left and right would overlap with anything underneath wrapper if the centre column was shorter.


 1:06 pm on May 10, 2007 (gmt 0)

Try this:


Should be close to what you need.


 1:07 pm on May 10, 2007 (gmt 0)

Sorry, posted at same time!

One thing to mention though, faux columns become more difficult if you want a fluid centre column - you have to use 2 wrappers, one with a white left, and one with a white right. Essentially blocking out the sidebars, and applying your colour ti the entire thing. If you tell us what you want the colours to be we can advise you better.


 1:09 pm on May 10, 2007 (gmt 0)

Mike that artical is amazing! Why didn't anyone think of that before?!


 2:19 pm on May 10, 2007 (gmt 0)

they did.. but note the Stop Press at the top..

Stop Press!

Several problems have been found with this technique since publication. Those problems are discussed in Appendix J

It's very heavy on the hacks and uses a weird technique that has already proved buggy.. the notion is good though if you can strip the code and learn from it, dodgy if you need a stable x-browser method.. personally I would stick with 'faux columns' where possible


 2:58 pm on May 10, 2007 (gmt 0)

Oops, I really should read the whole page of these things before I comment. Problem is it's almost like reading the manual, so I don't like to! ;)

You're right Suzy, stick with faux columns, it's more reliable, and you know I don't like hackery!


 10:10 am on May 11, 2007 (gmt 0)

Yes, Suzy is right, and i should have pointed out that there are some problems with this method.

Having said that ive used it and for my purposes it works well, so i think reading through the entire article is very important that way you will be able to work out which method is best for your needs.


 3:29 pm on May 11, 2007 (gmt 0)

Thanks for all your replies and the article too!

I think the faux columns should do what I need and they would be very easy to implement.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved