Overlapping <div> sections in HTML

mr_angry

I'm attempting to do a HTML layout using <div> tags. Everything is working smoothly in Opera, but in Internet explorer, my content column overlapps my footer. I can stop this using a pixel value for the height of the content div, but I want it to be scalable. The width property of the div accepts a percentage value, but for some reason, the height doesn't seem to.

As I said, everything is fine in Opera, but I need cross-browser compatibility. I assume there's a way around this. Anyone got any ideas?

Here's the code from the CSS for the styling and positioning:

/*******************************************************************************
Positioning rules
*******************************************************************************/
div#header {
font-size: 30px;
margin: 0;
color: #000;
background-color: #fff;
border-top: 4px solid #000;
border-bottom: 1px solid #000;
height: 57px;
}

div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 0px ;
width: 12%;
border-right: 1px solid #000;
color: #000;
padding-top: 10px;
background-color: #a9b;
}

#middlebox {
margin: 0 13% 0 13%;
width: 74%;
height: 82%; /*No effect for some reason.*/
/*border-left: 1px solid #000;
border-right: 1px solid #000;*/
padding: 10px;
background-color: #fff; /*** This div has a background to cover the 2-tone body BG ***/
}

div#rightbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 0px ;
width: 12%;
border-left: 1px solid #000;
color: #000;
padding-top: 10px;
background-color: #a9b;
}

div#footer {
position: absolute;
font-size: 12px;
color: #000;
background-color: #fff; /*** The header and footer have backgrounds, to cover the 2-tone body BG ***/
border-top: 1px solid #000;
height: 9%;
width: 100%;
bottom: 0.5%;
}

It's #middlebox and #footer that are overlapping.

thelad

can you upload the page to a server and publish the url so we can check it on someone else's browser? also have you the latest version of IE?

MrNuked

Maybe try "top:90%" for the footer layer?
Or are images causing the layers to be resized?

mr_angry

The site is still in pre-release development, so I might not be able to get it up on server, but I'll see what I can do. At the very least, I'll post screenshots here showing the problem.

I have the latest version of IE. I'm aware that it has certain problems with displaying <div> sections, thus it wasn't obeying the rules. What surprised me was that I could stop it overlapping width-wise, but not height-wise. Of course, I can limit the height, but seemingly not by a percentage value, which is pretty annoying.

The header (the only part of the page currently with images) has an absolute height specified which matches my header images, so I don't think that has anything to do with it.

mr_angry

Hey guys - here's the shot of the Opera layout:



And then the IE layout:



I still can't seem to solve this one. I'm baffled by the fact that percentage values wont work for the #middlebox height, but absolute pixel values will. I've added "position: absolute" to #middlebox, but to no effect.

Again, I changed "bottom: 0.5%" in #footer to "top: 98%; height: 2%;", but to no effect.