Div Float question

L

liunx

Guest
The following page leaves an 1 pixel gap between the 2nd & 3rd <div> Other than changing the body background color, is there a way to get rid of it

Thanks

Frank Polan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body style="background-color: Red;">
<div style="height: 100%;background-color: Lime; width: 30%; float: left;"></div>
<div style="height: 20%;background-color: orange; width: 40%; float: left; border: thin solid Black;">
<p>one pixel problem -> </p>
</div>
<div style="height: 100%;background-color: Lime; "></div>

</body>
</html>First, use a complete DTD... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">
Then, do this : p {
margin:0;
}
I think that'll fix your problem (maybe).BonRouge,

Sorry, that doesn't do it. I did manage to get rid of it by adding Float: left; width: 30%; to the 3rd div, but then that causes resizing problems.
I guess I'll just change the body background color

Thanks

Frank PolanWhat browser are you using? You could be running into Firefox's 1 pixel rounding error bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m -->).Sorry, I should have said - IE6

Thanks

Frank PolanIf you look closely, that's three pixels, not one. You're running into IE-Win's three pixel margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->).all I can say is WOW!!!!!!!!!!!!!!!!!!

Thanks for the link

Frank PolanInstead of border: thin solid Black;, use border: 1px solid #000;.I'll try it
Thanks
Frank Polan
 
You must log in or register to reply here.
Back
Top