Question

So, I’ve been stuck with this problem for a while now and I can’t seem to find a solution.

I’m trying to make a layout consisting of (for now) 4 different content areas like so:

What I’m trying to do

I’m trying to do the following things:

Simple explanation: Content should be the only scrollable thing on the page, with the footer following right behind it if content fits on the page, fixed on the bottom otherwise.

Detailed explanation:

• Fix banner and mainMenu so that they never move when page is scrolled.
• Make the content scroll with a page so that:
  • If the content (and footer) fit on a page, no scroll is displayed.
  • If the scroll is needed, content goes behind the banner (not being shown) and does not appear again above it.
  • If the scroll is needed, content can scroll until the bottom line of it and the footer are in the visible area.
• The footer should do two things:
  • If content and footer fit on the page, footer should stick at the bottom of the content
  • Otherwise, footer should be fixed on the bottom.

What I have tried

Fixing banner,mainMenu and the footer are fixed using position: fixed (and positioned accordingly). Parent div has overflow: hidden (which doesn’t seem to work).

<div id='main'>
  <div id='banner'>banner</div>
  <div id='mainMenu'>mainMenu</div>
  <div id='content'>.. some long content ..</div>
  <div id='footer'>footer</div>
</div>

And

#main {
  width: 960px;
  height: auto;
  margin: 40px auto;
  overflow: hidden;
}
#main #banner {
  width: 960px;
  height: 100px;
  position: fixed;
}
#main #mainMenu {
  width: 230px;
  height: auto;
  display: inline;
  float: left;
  position: fixed;
  top: 140px;
}
#main #content {
  width: 720px;
  height: auto;
  display: inline;
  float: right;
  margin-top: 100px;
}
#main #footer {
  width: 960px;
  height: auto;
  clear: both;
  position: fixed;
  bottom: 0;
}

The Problem

Footer does not follow content if it fits within the area

Content overflows on the top of banner

I would really prefer to do this just in CSS (if possible) and as compatible as possible (IE7+, all other major browsers).
It’s really getting frustrating now.. Any help would be appreciated.

Answer 1

There is no conceivable way I can think of that would solve your problem by just using css. Once you have set your elements to a fixed position they are out of the flow and thus your other elements cannot conform around them.

However I did find a solution by doing two different things. For the header issue I simply added another fixed element above the main banner and set it to the color of the background. This way the content will scroll behind it and look as if it is hidden. For the footer, I set up some javascript using jQuery to see if the content overflows or not. If it does then the footer’s position is set to fixed, otherwise the position is set to relative.

You can check it all out here in this demo: http://jsfiddle.net/mrQGh/4/

To test out the javascript simply delete the text until there is no more overflow and run it again.