2-col CSS layout with background colors that fill full height?

Question

I've had a reasonable amount of exposure to CSS layout.

I've looked at quite a few CSS layouts for 2 or 3 column layouts, and having a hard time to just find even just a reliable 2 column that allows me to do the following:

what I want:

• each column has its own background color
• i want the background column to fill the full height of the page
• i dont know which column will contain most text so each column must resize independently

of all the layouts i've found - or attempted myself they all have one of these problems

• an image is needed for the background (somewhat clever but yuk!)
• the background color only fills the full height if that column is the longest

I'm very tempted to just revert back to <TABLE> which I can reliably implement in about 3 lines of code.

Answer 1

If faux columns isn't your thing try multi-column layouts.

Remove content from either block (there's plenty of it) to try it out.

This was always a thing I had trouble with - I'd advise you to bookmark A List Apart and have a look through some of the articles in the CSS category. They have some excellent tutorials and writeups there for frontend coders (things like CSS sprites, liquid layouts, fonts etc.).