I am building a website and want a two column layout so that the columns background color fills the entire column up to the footer div below. It works as it should in IE but not in firefox.
In firefox the background colour ends where the right column content ends rather than continuing down to the footer. Additionally the content in the left column seems to be getting pushed down the page to the point where the right column content ends.
Please can you suggest why this is happening and provide a fix for my css?
Another issue I forgot to mention was that the caption text is not appearing where it should in Firefox but is is correct on IE. Any help with why this isn't placed correctly would also be appreciated. I am using a pseudo class <p> for this text with a margin to align the text.
I have fixed the caption issue by replacing the pseudo class <p> using relative positioning. The only issue that remains now is the background colour of the right column not filling the background all the way to the footer div below.
Wow I definitely tried to fix it, but to no avail so I'm going to try and explain what I think is missing.
With your body background set, if you could set it so that the background-color: of the #container would set the color of all its child elements(main, right, left, footer, etc) then you could style the background-color: of all the #container's child elements except for the right column which would be left to inherit the background-color: of the container. This way it would appear that the right column is full length as its background-color: extends to the bottom of the column. You could Check my website's code out at http://www.benhartlenn.com to see an example of this. on line 21 of my style sheet you will see a note that says the .container background-color: is for the sidebar, this is because the sidebar's are the only places that were left to inherit the container's background-color:
I hope this uhm... rather vague description of what you could do makes sense and gets you on the right path to solving your problem. Good Luck!
Westweb is correct, you would set the background colour of your container div to be white/whatever colour you need. If you wanted a background image to repeat-y down, you could use the "faux column" method: