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.
