CSS Layout for Sidebar and Footer DIVs

I have a container that is positioned relatively and contains divs for header, sidebar, main-content and footer.

My problem is with the sidebar and footer components. With my sidebar, I have had to position this absolutely with top and left values specified (it also has a z-index of 10 set).

This is all fine, but by having the sidebar as absolute, with the sidebar holding my menu, this sidebar div actually sits on top of my footer div, which I would like it to sit below the sidebar. So as my menu sidebar开发者_运维技巧 grows, my footer div (which has no CSS position) just always sits after the height of my menu, which can be any height.

Unfortunately, my site is not hosted as yet and so am unable to point you to it.

Stick to HTML Layout Gala and you'll be fine.

Absolute positioning for layout isn't advisable, except in very specific cases.

I use absolute positioning quite often. You just have to know how to work with it. What you need to do, based off your description, is to set position: relative on the footer, then set it's z-index higher than your side bar (based off your numbers, at least 11).