Why does the 2 boxes are side by side in IE7 while “b” is underneath “a” on other browsers (where it should be)?
<html>
<head>
<style type="text/css">
.a { float:left; width:100px; height:50px; background-color:#CCC; }
.b { width:75px; height:75px; background-color:#F00; }
</style>
</head>
<body>
<div class="a">a</div>
<div class="b">b</div>
</body>
</html>
Use the try-it editor for a live preview (copy-paste my code): http://www.w3schools.com/css/tryit.asp?filename=trycss_float4
EDIT: I want a fix on IE so it does the same thing as FF, Chrome, Safari, etc
Thanks
Read about the The IE Float Model Problem