Float right gets hung-up on float left in IE6/7?

HTML & CSS
1

float right gets hung-up on float left in IE6/7? I forget is there a true fix for this? Or do I just do the only thing I’ve found to fix it and give IE a negative top margin to bring it back up?

In short, the right float is 50px below the left float. The 50px is coming from the left floats natural height and its bottom margin. Thanks!

2

Hi Eric,
Generally speaking about a left and right float in a fixed width parent I don’t see anything that would trip a bug in IE.

I do see width 100% on the “Loading” div and span with a clearing div below it. That may be what’s causing problems, as you know the script for the search-box is right after that clearing div.


<td align="left" valign="top">

<h1>Meals and Snacks</h1>

<!-- begin google custom search --> 
<div id="cse" style="[B]width:100%;[/B]"><span id="loading">Loading...</span></div>
<div class="clear"></div>

A quick test of the floated h1 and search-box without the script shows it working fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
#wrap {
    width:600px;
    margin:0 auto;
    overflow:hidden;
    background:#CDF;
}
h1 {
    float:left;
    font:bold 16px/20px arial;
    margin:2px 0 25px;
    background:#0F0;
}
.search-box {
    float:right;
    width:300px;
    height:20px;
    background:#F00;
}
</style>

</head>
<body>

<div id="wrap">
    <h1>Meals and Snacks</h1>
    <div class="search-box"></div>
</div>

</body>
</html>
3

I tried earlier to make a simple test case but for some reason I couldn’t reproduce the behavior. Although I’m pretty sure I’ve run across this before (as have others) so I figured someone would have the generic answer that they’ve dolled out a few hundred times.

Otherwise, here is the page. Its the search box (top right) that gets hung-up in IE.

The CSS for the search box is currently is in the head. Currently the CSS given to IE is…

  • html form.gsc-search-box {margin-top:-51px !important; position:relative !important;}
    *+html form.gsc-search-box {margin-top:-51px !important;}

Thanks!

4

Can you post a simple example? I don’t trust words any more.

5

Hey thanks Ray. Your right! The width 100% was the problem. That was in there by default by Google and I moved it out of inline (on the real page) and never even thought to look at that. Good spot thanks again!