I am trying to float some text around a photo image using
<div>
<p>
<img class="floatleft" src="image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...
</p>
</div>
I have set <div> to clear:both so that if there isn’t enough text, it doesn’t matter and the <div> stack on top of each other.
In Firefox3 and Opera, there is not gap between the <div>, but in IE6 there is.
Can someone point me to the IE6 bug that is the culprit?
Rayzur
2
Hi,
It sounds like you just need to trip haslayout for IE6.
Working from the code you posted this was the best I could make of what you are trying to do.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
div {
clear:both;
overflow:hidden;/*contain inner floats and IE7 haslayout*/
background:#EEF;
}
.two {background:#CDF;}
* html div {zoom:1;}/*IE6 haslayout*/
img.floatleft {
float:left;
background:red;
}
.two img {background:lime;}
p {margin:0;}
</style>
</head>
<body>
<div>
<p><img class="floatleft" src="image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>
<div class="two">
<p><img class="floatleft" src="image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...</p>
</div>
</body>
</html>