Non-floated element between two floated ones - IE7

Question

This is my code (really simplified):

<div style="float: left;">
    <div style="float: left;">
        <!-- Some content -->
    </div>
    <div style="float: right;">
        <!-- Some content -->
    </div>
    <form method="post" style="display: block; width: 100%; position: relative;">
        <fieldset>
            <!-- Some content -->
        </fieldset>
    </form>
</div>

In IE8, FF3.6/4, Chrome and Opera it looks good. Div's don't have specified width, and I want form to fill remaining space. But in IE7 non-floated form drops lower. What should I do?

You can see this on this site (top bar)

Answer 1

Is there a reason that you don't want to specify widths? It seems like their header is much more verbose than necessary. would something like below accomplish the same thing for you?

<div style="float: left; width:100%;">
<div style=" display:block;float: left; position:relative; top:0; left:0; width:20%">
    <p>LEFT SIDE</p>
</div>
<div style="display: block; position: relative; float:left; top:0; left:0; width:60%;">
        <form method="post">
    <fieldset>
        form stuff
    </fieldset>
</form>
</div>
<div style="display: block; float: left; position:relative; top:0; left:0; width:20%;">
    <p>RIGHT SIDE</p>
</div>

This should work in IE but CSS may need tweaking to compensate for how older IE handles the box model.

Answer 2

when you specify the form to have 100% width, it will ocupy the full width of the parent, and in this case, the parent is the same as the one for the floated divs.

You either clear the width of the non-floated and keep the rest or specify a width for the floated ones and clear the width of the non-floated.