Layout challenge: fluid horizontal layout with fixed header and footer

must resize with browser window

[audiolizard]

OK, I'm trying to achieve a page layout that flows with the horizontal width of the browser window and also has a fixed header and footer. I call this a "jaws" layout because the header and footer are pegged at the top and bottom of the browser window. The only defined dimensions are the heights of the footer and header. For simplicity, let's say the header and footer are each 100px high and 100% wide. They are placed on the top and bottom of the window using absolute positioning. I want the content area between the header and footer to have its own vertical scrollbar for overflow so that no content flows behind the header or footer. So vertically it will look as follows:

100px high header
variable height content area with scrollbar if overflow
100px high footer

I was able to achieve this design with the following CSS, but it doesn't work in IE.

div#content {
 height: auto;
 position: absolute;
 bottom: 100px;
 top: 100px;
 overflow: auto;
}

In internet explorer, the content overflows behind the footer and the whole browser window gets a scrollbar such that when you scroll vertically, the footer is no longer pegged to the bottom.

Is it possible to achieve this kind of layout in a way that would be cross-browser compatible? Or is there maybe a different approach that I could take?

[alias]

This technique is usually called CSS FRAMES - you might try searching it.

As for your code - I think you might try adding overflow:hidden; to html/body.

[audiolizard]

I tried adding overflow:hidden; to html/body as suggested. In IE, it did help the footer stay pegged to the bottom, but the content is still flowing behind it, unreadable with no scrollbar.

I'll research CSS frames... what I want to do is exactly like using frames and setting the middle content height to * so that it just fills in the vertical space that's left between the header and footer and does so dynamically as the browser window is resized.

[doodlebee]

use "overflow:scroll" instead of "overflow:auto".

[bee_jay]

I have been searching for the same solution. I think I found it here:
http://www.cssplay.co.uk/layouts/fixit.html [cssplay.co.uk]
It seems to do everything you ask. I'm about to copy it, and hack it to suit my purposes.

Man .. I was beginning to think I wouldn't find a solution.

[audiolizard]

Thanks for the link to The CSS Playground, although it will probably be removed soon. I've seen that site before, and it contains a lot of gems. I hadn't seen that specific page, but I actually did end up using the tutorial on webreference.com, that's linked from the page you linked to, in order to come up with something that works.

Apparently, the key is to use fixed positioning. Because IE doesn't currently support fixed positioning, you have to hack it by using the IE faulty box model. In order to get valid code and still use the faulty box model, you have to begin your document with something other than a DOCTYPE declaration, like so:

<?xml version="1.0" encoding="UTF-8"?>

The container divs for your header and footer are then styled using absolute positioning, and the div that you want to scroll gets a fixed position attribute with the * html hack for IE to use the faulty box model instead of fixed positioning. Check out that webreference.com tutorial.

Things shouldn't have to be this difficult. And thank you, Stu Nicholls, for writing that tutorial.

Another more complicated, but far more flexible solution that relies on JavaScript, can be found by googling "Frames without frames Introduction". It's pretty incredible.