I'm doing a simple 6 div layout for a new app I'm building. It's got 3 divs along the top, and 3 divs for the main body. Everything validates fine & looks perfectly fine in FF. Most of the time it looks fine in IE7 as well. However, at certain particular resolutions a few of the divs, #header-right and #body-right in particular, get shoved around. I'm thinking it has to do with the float properties or perhaps a width problem (though, when I set the widths of the divs to < 100%, the problem persists).
Is this an IE7 bug or a user error? Any help/insight is appreciated.
The CSS & XHTML are posted below, and you can see an example page at https://webapp.augustana.ca/av/test.html
Code: Select all
html,body{
padding:0;
margin:0;
height:100%;
}
#header-left{
height:137px;
float:left;
width:10%;
background-image:url(/av/images/left_header_loop.jpg);
background-position:right;
text-align:right;
}
#header-centre{
height:137px;
float:left;
width:80%;
background-image:url(/av/images/header_bg.jpg);
}
#header-right{
height:137px;
float:left;
width:10%;
background-image:url(/av/images/right_header_loop.jpg);
background-position:left;
text-align:left;
}
#body-left{
height:285px;
background-color:#fff;
width:10%;
float:left;
background-image:url(/av/images/left_body_shadow.jpg);
background-position:top right;
background-repeat:no-repeat;
}
#body-centre{
background-color:#fff;
width:80%;
float:left;
}
#content{
padding:10px;
}
#body-right{
height:285px;
background-color:#fff;
width:10%;
float:left;
background-image:url(/av/images/right_body_shadow.jpg);
background-position:top left;
background-repeat:no-repeat;
}Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
CSS test
</title>
<style type = "text/css">
/* This is where the above CSS is placed */
</style>
</head>
<body>
<div id = "header-left">
<img src = "/av/images/left_header_shadow.jpg" alt = "Left shadow"/>
</div>
<div id = "header-centre">
</div>
<div id = "header-right">
<img src = "/av/images/right_header_shadow.jpg" alt = "Right shadow"/>
</div>
<div id = "body-left">
</div>
<div id = "body-centre">
<div id = "content">
This is the body
</div>
</div>
<div id = "body-right">
</div>
</body>
</html>