Forum Moderators: not2easy
This is my first post here, so thank you in advance to those of you who take time to offer me some advice.
I have a two column design (div "sidebar", and div "mainContent")both contained in a div "container". The sidebar and mainContent should lie next to each other, with no space in between. Well this works great on all browsers except IE6 (IE6 bounces the mainContent div below the sidebar div). I think this is the 3 pixel jog issue, which I've read about online, but can't seem to apply the fix correctly to my code.
Below is a striped version of my code followed by my css:
<div id="container">
<div id="sidebar">
<div class="nav"><a href="#">Here is my nav.</a></div>
</div>
<div id="mainContent">
<img src="images/flash.jpg" width="499" height="335" />
</div>
</div>
and my css:
#container {
width: 738px;
margin: 0 auto;
text-align: left;
}
#sidebar1 {
float: right;
width: 239px;
}
#mainContent {
margin: 0 239px 0 0;
}
.nav {
background-color: #975B37;
}
Again thank you for your time and suggestions.
and a warm welcome to these forums. ;)
Try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
#container {
width:738px;
margin:0 auto;
}
#sidebar {
float:right;
width:239px;
}
#mainContent {
float:left;
width:499px;
}
.nav {
background-color:#975b37;
}
</style></head>
<body><div id="container">
<div id="mainContent">
<img src="images/flash.jpg" width="499" height="335" alt="">
</div><div id="sidebar">
<div class="nav"><a href="#">Here is my nav.</a></div>
</div></div>
</body>
</html>
birdbrain
No problem, you're very welcome. ;)
