ansaurus

Question

Internet explorer and floats: please explain

Answer 1

+3 A:

The floats are being bumped to the next line because of the width: 270px on the rows. That happens in IE6/7 because of its broken float model. IE puts the float elements next to the colored row divs instead of overlaying them, but since their combined width is bigger than the width of the wrapper, the colored rows drop down to the next line.

If you really need that maximum width of 270 pixels for those colored bars, you can use max-width instead. That doesn't work in IE6, though, so if that's really critical you'll need a work-around for that.

mercator 2009-05-07 16:41:08

They shouldn't be though because they are block level elements (ie not inline). Every other browser does it this way.

cletus 2009-05-07 22:41:10

Indeed... But IE isn't every other browser. I've clarified my answer a bit.

mercator 2009-05-08 12:29:13

Answer 2

A:

not sure why your trying to achieve it that way. but this works.

<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="row1"><div class="text">FOO</div></div>
<div id="row2"><div class="text">BAR</div></div>
<div id="row3"><div class="text">THESE PRETZELS ARE</div></div>
<div id="row4"><div class="text">MAKING ME THIRSTY</div></div>
<div id="row5"><div class="text">BLAH</div></div>
<div id="row6"><div class="text">BLAH</div></div>
</div>
</body>
</html>

YuriKolovsky 2010-03-26 09:20:48

ansaurus

tags:

views:

answers:

Internet explorer and floats: please explain

related questions