Equalising CSS Column Lengths

I'm not an expert, but one way to do this would be to position your three columns within a 'wrapper' div, which has a repeating background graphic for all three of your columns (so that the columns look the same length even if the content varies. You'll need a clearing line break just before the closing div tag, plus other IE hacks depending upon the exact composition of your CSS. Then you set your footer div with a 'clear: both;' so that it falls below the floating wrapper div. I think that'll do the trick.

There's a really clear step-by-step of how to get the layout you want here:

http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

Or if you want to go really wierd ~

http://www.stunicholls.myby.co.uk/layouts/3cols.html
http://www.stunicholls.myby.co.uk/layouts/3cols2.html
http://www.stunicholls.myby.co.uk/layouts/centered.html

Thanks - great tutorial. It's almost there.

However - I want to colour the left and right columns and I just can't get that to work. If I add background colour it only colours where there is text and not to the bottom....

Any thoughts.

Read my post again

Hmmm. I've replaced the background colour with repeating gig but still can't get it to work (a single graphic won't do as the center column is fluid).

Not certain what you mean by a 'clearing line break'.

Oh, I see. Well in that case you'll have to do some creative thinking with extra divs, or hope that someone else has a better idea. You could at least colour the first column differently to the next two, and they would all look the same length, so you're almost there.

As for the 'clearing line break', not all of the browsers will display the background graphic of the containing wrapper div unless you force the browser to process something within the div, after the inner divs (if you know what I mean). If you put a line break just before the closing wrapper div tag and style it to clear the inner divs (assuming they are floating) thus: <br style="clear: both;" />, you should then find that your background graphic will butt up to your footer.

If plain background colours will suffice, I have just noticed a very clever CSS generator (see link below) which colours columns by using a wrapper with very wide, coloured borders. It'll even write the code for you - take a look.

The classical solution to this problem for a single menu is to fit a bg graphic. BUT. It needs to be set up in the outer container not in the menu itself. That way it tiles all the way down. For two of them you need two divs nested one inside the other. One has the graphic right the other to the left. Here is something I prepared earlier. Help yourselves to the CSS by all means. [url] http://www.atthe404.com/trident [/url]

Okay. I'm getting close. Please take a look at the attached file.

In IE, all three columns works okay - they all extend to the length of the longest. You can resize the window and it works.

But Mozilla, Firefox etc seem to ignore the clear: both; command and allow the left and right borders to shrink up the page.

The left and right columns are coloured red so I can see what's happening. The center column is teal with a black and grey thick border on the left and right. In the final version, the red and teal would be removed, leaving three columns: black (left), white (center), grey (right).

.......please help

A url not a zip would be handy. Here is a tip: When positioning it is tempting to add borders to see what is what. It is a very dangerous practice. The presence or absence of an EXTRA border is quite sufficient to bork pixel perfect layouts, and crucially the W3C spec for floated elements is completely different when the parent container has a border. SO: For test purposes you just need to put in a different colored bg.
HTH.

Your clearing div or line break needs to go just before the closing tag of the containing div. How that works with nestled containing divs, I'll leave to root to explain

The border is integral to the design - essentially it is the left and right column background. This is the only way I've managed to get this to work so far.

Thanks, but I've tried that.

Notice how the left and right borders (columns) line up with the bottom of the center content when you change the window width. I want these to line up with the lowest content - which ever columnthat may be.

Well then you can not use a border based positioning scheme.