0

Hi this is a simplified version of an issue I'm having with IE7. Basically the divs following the cleared div (green) don't behave as expected (in IE7). It works as expected in Safari, FF etc and IE8.

Does anybody have any advice for a fix. Thanks for any help :)

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    #wrap {width:600px;height:1000px;background:black;}
    .box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
    .clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
    .fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
    <div id="wrap">
        <div class="box first"></div>
        <div class="box small second"></div>
        <div class="box xsmall third"></div>
        <div class="box clear fourth "></div>
        <div class="box fifth"></div>
        <div class="box sixth"></div>
    </div>
</body>
</html>
Kara
  • 6,115
  • 16
  • 50
  • 57
csbourne
  • 957
  • 1
  • 8
  • 10

1 Answers1

2

You can...

A) insert a "divider" clear element between 3rd and 4th which will do clear:both, span a height of 1px, take up the entire width, and then margin-top:-1px on 4, 5, 6 so there's no vertical 1px gap in between.

B) use inline-block instead of floats, like this: http://jsfiddle.net/gLcNm/16/

This requires markup change so there are no whitespace between your box divs, AND a css hack for IE which doesnt natively do inline-block without redeclaring inline for block levels.

C) make each of those box divs be contained by a "row" div:

<div class="row">
<box><box><box>
</div>

Then make row clear so it'll contain the boxes.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • meder: I don't see how your answer B (applying display: inline-block instead of float: left to the boxes) helps in this case. The fourth box in your jsfiddle breaks into a new line because the container element is too narrow. If I make it wider, then the box remains in the first line: http://jsfiddle.net/gLcNm/32/ – gvas Sep 06 '12 at 12:44