understanding how to get footer to move automatically

[tstephen]

After the last year of taking apart and learning from others code, I decided to take the plunge and write my own css. I can get a header and content to show as I want no problem, it's the footer that has me baffled I'm wanting the footer to show up below the menu and content, which I did get to work as you can see. But I can't figure out how to get the footer to move automatically when there is more text than there is menu. I'm also going to be expanding (placing more content in) the menu at times, so the footer needs to adjust to this also. Here are my files.. Style sheet & Index fileThanks for the help!(To Mods: these are direct links to these files. No ads, affiliate, or redirects)

[shiftJIS]

The issue is that both your .menu and .content divs are absolutely positioned. It's a bit of in issue if you cannot guarantee that the content will be longer than the menu div. I've been thinking about this problem a lot, and my method is to float the menu and div. Since you're using a fixed-width layout, just float those two divs, and put in a <div style="clear: both; height: 1px; margin-bottom: -1px"> </div> before the footer. The "clear:both" is what will push the footer below all other floated content, and you could very well just apply it to the footer. I personally prefer having a spacer div there.

[tstephen]

Thanks! Will give that a try.Edit: Tried it. Didn't work. Still getting the same result. I also tried floating the container that the content and menu are within, instead of just the content and menu, but that didn't work either. Should I not use a container for the purpose of this page? Or is there another way to layout the code so that it will work how I want the final product to look?

[jlhaslip]

I see those linked pages still have the position:absolute in them. Have a look at this sample page and the css file for it. Header, Sidebar, Content area and Footer should be exactly as you want it. This page may have some cleaning up to do, but it is the only page I could find with a general layout as you desire.html pagecss for pageFeel free to download a copy of both to try out.

[tstephen]

Thanks so much for all your help... will check the site sample out Just to note.. I did try taking the absolute positioning out as per your suggestion before but it just messed up the layout.