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?
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.
Digital Web Magazine | The Watchmaker Project
Bite Size Standards | 29digital Design Studio
I think this is what you are looking for
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).
Thanks Paul O'B, that works well.