Originally Posted by
WildScot
Out of interest is there some logic behind that or is it simply the madness of Internet Explorer?
This one is just pure madness 
On any normal widthless float then any child with haslayout (but not another float) will cause the element to be 100% wide in IE6.
If you float a right float inside a left float then once again it stretches to 100% in IE7 and under.
If you float a left float in a right float then all is fine
If you float a left float in a left float then all is fine.
Demo for reference:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.fl {
float:left;
background:red;
height:100px
}
.fr {
float:right;
background:blue;
height:100px;
}
.fr2 {
float:right;
background:green;
height:100px;
}
.has {
zoom:1.0;
}
hr {
clear:both;
}
</style>
</head>
<body>
<h1>Widthless Float Bugs in IE</h1>
<div class="fl">
<div class="has">Haslayout in a float<br />
IE6 only stretches the parent<br />
to 100% width</div>
</div>
<hr />
<div class="fl">
<div class="fr">Float right in a float left<br>
IE7 and under stretch the parent<br />
to 100% width</div>
</div>
<hr />
<div class="fr">
<div class="fr2">Float right in a float right<br>
IE7 and under stretch the parent<br />
to 100% width</div>
</div>
<hr />
<div class="fr">
<div class="fl">Float left in a float right<br>
is the only combination that works<br />
in IE (apart from the next demo below)</div>
</div>
<hr />
<div class="fl">
<div class="frl">Float Left in a float Left<br>
is fine in all browsers<br />
apart from older Opera</div>
</div>
<hr />
</body>
</html>
Reply With Quote
Bookmarks