Problems with 2 column layout

[quadrant6]

This is an image of what I'm trying to achieve (fixed width 2 col):



Quite simple I would have thought but being the newbie I am to CSS...

There are 2 things that complicate:

1. the footer needs to have no bg color (so the body bg image can be seen)
- this means it has to be outside the container div and therefore cannot be user as a 'clearer'.

2. I can't be certain which column will have the most content (usually the main content column but not always)

This is what is currently happening when there isn't enough content:



HTML | CSS

I need both to be of equal height and the footer to be transparent.

Can anyone offer some suggestions?

[Buddy Bradley]

Why does the footer need to be outside the container? As long as you don't give the container itself a background-color, the footer will just inherit the background of the body. Set the background-colors for the header, nav and content.

[Paul O'B]

Hi,

I think this is what you are looking for

http://www.pmob.co.uk/temp/2coltest.htm

Just view source as its commented and should be self explanatory.

The equalising column is just a background gif repeated down the container and the right column colour is the container background colour showing through.

Have a look at the three col demo sticky thread for other versions (with more complicated techniques).

Paul

[quadrant6]

Thanks Paul O'B, that works well.