views:

56

answers:

3

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

+1  A: 

Read about the The IE Float Model Problem

jessegavin
I'll check that, thanks
Mike Gleason jr Couturier
Since this is really what's happening, and since there's no workaround, I took another approach. Still this answers my question, thanks.
Mike Gleason jr Couturier
+1  A: 

Add clear to b to force it to appear under a in all browsers:

.b { clear: both; width:75px; height:75px; background-color:#F00; }
Dolph
I want it underneath (not under/another line) like it should be
Mike Gleason jr Couturier
+1  A: 

If you want elements underneath, why even use float? Use display:block instead, or am I overlooking something?

Nimbuz
Don't ask why ;) Seriously, this is the simplest sample I could come up with. And IE clearly have a display problem.. I want a IE fix
Mike Gleason jr Couturier