I'm using a two column layout with a sticky footer.
I'm trying to make the sidebar use 100% height, even when there's not much content on the page.
I've used two techniques to do this. The first is a CSS sticky footer (http://www.cssstickyfooter.com/) and the second is faux columns (http://www.alistapart.com/articles/fauxcolumns/).
Faux columns is working well to keep two columns equal height, and to expand either one as required.
My challenge is that if you look at this example (http://visuals.customstudio.co.uk/atc/sidebar/) you'll see that the sidebar is not extending to the full height of the page.
I've tried another technique as detailed here (http://stackoverflow.com/a/6838338/557002), which you can see here (http://visuals.customstudio.co.uk/atc/sidebar/about.html) but this means that if the sidebar has more content that the main area, it's not seen.
Any ideas of how I can make both columns increase the page height as required, and extend all the way to the footer will be massively appreciated.
Thanks in advance,
Tom
I think I know what you mean - but the solution deviates from faux columns. I think you want to make the right column will always appear to fill the vertical height of the inner container.
To do this just use the background image on the <div id="outer" /> element. Like so:
#outer {
url(../images/faux-columns.png) repeat-y center top;
}
Hope that helps!