Forum Moderators: not2easy
#nav {
float: left;
width: 200px;
background: red;
height: 1%;
}
#main {
width: 200px;
height: 200px;
margin-left: 200px;
background: #ccc;
}
<body>
<div id="nav">
<p>left nav</p>
</div>
<div id="main">
</div>
</body>
I haven't tested it but you can google for it.
Usually the way I fix the 3px text jog is to add
zoom: 1;I usually avoid pixel-perfect layouts too :P
rogersf (Welcome to WebmasterWorld btw..) yes it can be fixed in IE6 and below too.
It only ever does happen if a width or height is declared on the margined div. The width and height give the div "layout" or set hasLayout to true which is when IE's float model goes quirky (apparently not IE7 though)
So what you would have to for IE 6 and below is remove the margin off the right div - it doesn't need it, its quirk is that as soon as it has a width or height it's not floating properly anyway
if you do this you should see that nothing has changed it will still act as though it has that margin, and it still has the 3px gap then you can add a -3px margin to the left div to make the right div move over a bit.. you can't do this while it still has the unnecessary margin
so for IE6 and below,
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#nav {margin-right: -3px;}
#main {margin-left: 0;}
</style>
<![endif]-->
this has been around for so long that I had no sites where it was even triggered, thanks for this post!
Suzy
[edited by: SuzyUK at 10:22 pm (utc) on Mar. 8, 2007]
