Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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)

WebmasterWorld Senior Member 10+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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)

WebmasterWorld Senior Member 5+ Year Member

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)

10+ Year Member

Try this:


Should be close to what you need.


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

WebmasterWorld Senior Member 5+ Year Member

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)

WebmasterWorld Senior Member 5+ Year Member

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


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

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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)

WebmasterWorld Senior Member 5+ Year Member

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)

10+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month