CSS Layout for Sidebar and Footer DIVs

Question

Hi,

Having trouble positoining my DIVs and hope someone can assist. Unfortunately, my site is not hosted as yet and so am unable to point you to it.

Basically I have a container that is positioned relative that holds 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 as absolute with top and left values specified, which 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.

Can someone pls assist on how to achieve this as I have tried a few different things to no avail.

Any example sites that could help me would also be great.

Thanks.

Answer 1

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

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

Answer 2

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).