Forum Moderators: not2easy
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!
Wes
<div id="wrapper">
<div id="left"></div>
<div id="centre"></div>
<div id="right"></div>
</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.
#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>
</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.
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.
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
You're right Suzy, stick with faux columns, it's more reliable, and you know I don't like hackery!
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.
I think the faux columns should do what I need and they would be very easy to implement.
