Forum Moderators: not2easy
Header
Content 554px ¦ Sidebar width 206px
Footer
The content div contains an image of width 554px and the sidebar has an image of width 206px. The code shown below plays nice in all tested browsers but IE6 where the image in the content div is pushed below the image in the right-floated sidebar - it seems like the image in the content div is being pushed right a couple of pixels.
Can anybody shed any light on this?
CSS
html, body {
margin: 0;
padding: 0;
}#page-container {
margin: 0;
padding: 0;
width: 760px;
margin: auto;
}
#header {
height: 128px;
}
#footer {
height: 66px;
}
#sidebar-a {
margin: 0;
padding: 0;
float: right;
width: 206px;
height: 922px;
}
#content {
margin: 0;
padding: 0;
background-image: url('images/background.jpg');
background-repeat: repeat-y;
height: 922px;
width: 554px;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>test</title>
<meta http-equiv="Content-Language" content="en-us" /><meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<style type="text/css" media="all">@import "master.css";</style>
</head>
<body>
<div id="page-container">
<div id="header"><img src="images/banner.jpg" alt="Banner" /></div>
<div id="sidebar-a"><img src="images/rightbar_home.jpg" alt="Talk to us"><br /><br /><br /><br /><br /></div>
<div id="content"><img src="images/oval_home.jpg" alt="Forest"></div>
<div id="footer"><img src="images/footer.jpg" /></div>
</div>
</body>
</html>
are there borders on the images maybe? that will add 2 pixels to each
Hhhmmm, I'm not sure of the reason either at the mo (?!) but the problem occurs even without the images.
You need to set width:763px on #page-container for the contents to fit!? (3px more than should be necessary)
This sounds a lot like the IE6 3px float bug [positioniseverything.net] - but you already have widths set on your elements, so it should be OK?! I think, however, that it could still be related to this.
However, a possible workaround is to float:left your #content DIV and this seems to work OK.
[edited by: penders at 1:59 pm (utc) on Oct. 25, 2007]
Edit: I just sa that Penders suggested teh same thing, yes, adding float left or right in your #content seems to be the solution.
[edited by: adrianTNT at 1:58 pm (utc) on Oct. 25, 2007]
