Problem with double horizontal margins appearing in IE6 and IE7

I'm having a wee issue with a double margin appearing between <div>'s. It works fine in FF, Opera, Safari etc. but not in IE6 and IE7 (surprisingly enough).

There's meant to be a left floated <div> beside a right floated <div> and then underneath there is another lefty and righty. There's only meant to be 24px between them but in IE6 & 7 there's 47px.

HTML:

<div id="content">
    <div id="contentwrapper">
        <div class="infobox leftinfo row1">
            <div class="searchForm">
            </div开发者_如何学JAVA>
        </div>
        <div class="infobox rightinfo row1">
            <div class="searchForm">
            </div>
        </div>
        <div class="infobox leftinfo row2">
            <div class="textstuff">
            </div>
        </div>
        <div class="infobox rightinfo row2">
            <div class="textstuff">
            </div>
        </div>
    </div>
</div>

CSS:

#contentwrapper{
    padding:23px;
}
#content{
    background-image:url(../img/contentbg.jpg);
    border: 1px solid #81b8de;
    -moz-box-shadow: 0 0 8px 5px #80cafe;
    -webkit-box-shadow: 0 0 8px 5px #80cafe;
    box-shadow: 0 0 8px 5px #80cafe;
    behavior: url(/sponster/PIE.htc);
    position:relative;
}
.infobox{
    border: 1px solid #4eed4e;
    background:url(../img/infoboxbg.png) repeat-x;
    height:100%;
    -moz-box-shadow: 0 0 12px -1px #406020;
    -webkit-box-shadow: 0 0 12px -1px #406020;
    box-shadow: 0 0 12px -1px #406020;
    behavior: url(/sponster/PIE.htc);
    position:relative;
}
.leftinfo{
    float:left;
    width:442px;
    margin-bottom:24px;
}
.rightinfo{
    float:right;
    width:442px;
    margin-bottom:24px;
}

N.B. The row1 class is just so a JavaScript file can make sure the heights of each side-by-side <div> are the same. It's a jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin and there doesn't appear to be any issues with it.

Any ideas where I'm going wrong?

Add this to HMTL in between rows:

<br class="cl">

It will look like this:

<div id="content">
  <div id="contentwrapper">
    <div class="infobox leftinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <div class="infobox rightinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <br class="cl">
    <div class="infobox leftinfo row2">
      <div class="textstuff">
      </div>
    </div>
    <div class="infobox rightinfo row2">
      <div class="textstuff">
      </div>
    </div>
  </div>
</div>

Add this to CSS:

.cl{clear:both}

"Double 'vertical' margins" is a well known issue in IE 6, but it's not supposed to be an issue in IE7. EDIT: My first answer was incorrect due to misunderstanding over the original title of this thread, which read: "Problem with double vertical margins appearing in IE6 and IE7"

After you apply the fix below, double check your DOCTYPE and run your code through the W3C Validator just to make sure everything else is good.

Using an empty <div> is a very common method to "clear" your floats despite the accepted answer in this thread which recommends using a line-break element <br>.

An empty <div> has no height as demonstrated in this JSFiddle by the red <div>'s with class .empty. Notice the empty red <div>'s are invisible and take up no space whatsoever between the blue <div>'s.

Other elements such as <br /> have a line-height which may introduce other spacing issues as demonstrated in this JSFiddle. Note how you can see a full empty line between each blue <div>.

Therefore, add <div style="clear:both;"></div> between your <div> rows:

<div id="content">
  <div id="contentwrapper">
    <div class="infobox leftinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <div class="infobox rightinfo row1">
      <div class="searchForm">
      </div>
    </div>

    <div style="clear:both;"></div>

    <div class="infobox leftinfo row2">
      <div class="textstuff">
      </div>
    </div>
    <div class="infobox rightinfo row2">
      <div class="textstuff">
      </div>
    </div>
  </div>
</div>