I'm currently trying to rebuild an old website that had to be taken down because it was hacked. So I thought it would be a good opportunity to redo the templates, etc. (The whole site needs restructuring, anyway.)

I want a header, a left hand menu, content and then a footer with text that is centred to the width of the screen, not the width of the content.

My div page is as follows:

body {
margin: 0px;
padding: 0px;
background-color: #001166;
}

#header {
background: #001166;
background-color: #001166;
text-align: center;
height: 66px;
padding-top: 33px;
padding-bottom: 33px;
}

#menu {
background: #001166;
float: left;
height: 100%;
width: 18%;
padding-left: 10px;
}

#content {
background: #ffffff;
float: right;
width: 80%;
padding-top: 50px;
padding-bottom: 55px;
padding-left: 5px;
}

#footer {
background: #001166;
padding: 0px;
clear: none;
width: 100%;
text-align: center;
height: 50px;
}

It works exactly as I want in IE7, but in Firefox, the footer content ends up in the menu content, rather than separated from it.

I've been going round in circles for a while now, so I can't remember what I had before. It used to be fine in Firefox, but in IE the footer would be at the bottom of the screen, and when you scrolled down, it went up. (As in, it didn't stay at the bottom of the screen always.) That may have been when I was using a container div. I know at one point I managed to get the same bug - the set at bottom of first screen footer - on Firefox as well.

Any suggestions welcome.