Can't get CSS to stretch columns correctly

Hey guys,
I've been trying to code a layout from a PSD, and I'm rather new at CSS, and having some problems with some stuff that normally would be simple in HTML Tables.

I understand you have to think about design differently with CSS, etc. etc., but I really don't see how to do this any way other than the technique I'm trying to achieve. Basically, I have the header and footer areas coded fine on top of and below the main area (that must stretch vertically). I used a layout I found somewhere online (can't recall where) to get a 3 column layout that stretches each column to the height of the highest column, but the problem is that I need to put DIVs inside of each column, to handle the side bars of the layout. I can get them to 100% height no problem at default height, but as soon as the columns get longer, the individual DIVs do not stretch vertically with their parent column.

http://jfletch.info/portfolio/boredvideo/index2.html
http://jfletch.info/portfolio/boredvideo/style.css

Those are the URLs to the stylesheet and index page, which has the main area colored right now to show the distinct regions. As you can see, the red and blue stretch down, but the actual sidebars do not. Any solutions? Thanks in advance.

EDIT: In Internet Explorer, you can see the sidebars, in Mozilla Firefox, you can't even see them.

If I'm reading your question correctly - then the simplest way to acheive this would be to apply a vertically tiled image to this <div class="pagewidth">

Cut a horizontal tile from your psd, say 2 or 3 pixels high, then apply it as a background in your css.

As far as CSS goes, yes it does require a different way of thinking - I don't think you're quite there yet - I don't think anyone is fully there yet. But it appears that you are kind of using lots of < div >s to replace lots of <td >s.

The div tag isn't really meant to be used to manuipulate the minutae of visual design, rather it's there for *chunking* related parts of your document together.

Really, your design could be acheived with a minimum of say - 6 divs, and absolutely no classes.

A fantastic tutorial on the correct use of CSS is available here, well worth a look http://css.maxdesign.com.au/selectutorial/index.htm

Kind regards,

Gary

So essentially, rather than a red white and blue background, I'd have a single background and I'd throw the content of the page on top of it? That sounds like a great idea, I'll try it out and see how that works. Thanks a bunch.

You got it :thumbsup:

This article explains it better than I could (at this time of night anyway)
http://www.alistapart.com/articles/fauxcolumns/

Good luck,

Gary

Also (I just started experimenting with this one), you can try "display: table-cell;" on the appropriate div.

It emulates the expansion and contraction of a table cell while still allowing your markup to remain semantic.

http://jfletch.info/portfolio/boredvideo/index.html

I've been making progress, I cleaned up a lot of my code, have a background image and centered the header and footers without their ends, letting the background image make the appearance of their ends. Thanks a bunch guys, should be done soon.