HTML Forum

**cbeaudin** · 08-12-2007, 10:32 AM

Im looking for an easy way to do the following...

I want to have a header at the very top of the browser and a footer at the very bottom of the browser with a content window in the middle.

ie. The header and footer should always be visible at the top and bottom, even if the content is bigger than the browser window.

Thanks in advance for all help!

**bas** · 08-12-2007, 02:46 PM

Try this, mark-up:

HTML Code:

<body>
<div id="header">Header</div>
<p>Content</p>
<div id="footer">Footer</div>
</body>

CSS:

Code:

body {
  margin:0;
  padding-top:50px; /* same as header height */
  padding-right:0;
  padding-bottom:50px; /* same as footer height */
  padding-left:0;
}
   
div#header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:50px;
  background-color:#aaa;
}
   
   
#footer {
  position:fixed; 
  left:0px;
  bottom:0px;
  width: 100%;
  padding:0;
  height: 50px;
  background-color:#aaa;
}

The header works fine in IE7, IE6, FF, Opera, ... the footer does to except in IE6!
Maybe you can do the footer with javascript/ajax, but I have no idea about that.

Hope this can help you.

**LadynRed** · 08-12-2007, 05:07 PM

position:fixed is the wrong way to go about placing the footer and IE 6 does NOT support it. Javascript is probably overkill. However, if you want the header AND footer always visible, then you're going to have the center content section scroll if it's got more content than would fit in the browser window. Why do you want it that way ?

**cbeaudin** · 03:28 PM

I dont nessisarily HAVE TO have it that way, but im trying to build a content manager and i think it would look much better like an application.

ie. i plan to have tools, links and such on the bottom and i dont want the customer to have to scroll all the way to the bottom to use the tools. It will also look better if the page happens to only have a few things on it, the information wont all be bunched up at the top.

at the moment it looks wierd on shorter pages especially because the footer div is a different color across the page then the background color.

If anyone has a method that works in IE 6 it would be greatly appreciated.

ps. Thank you very much bas for replying, very helful, however i will need something that works in ie 6 aswell.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!