Не плавающий элемент между двумя плавающими - IE7

Question

Это мой код (действительно упрощенный):

<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>

В IE8, FF3.6 / 4, Chrome и Opera это выглядит хорошо.У Div нет указанной ширины, и я хочу, чтобы форма заполнила оставшееся пространство.Но в IE7 неплавающая форма падает ниже.Что я должен делать?

Вы можете увидеть это на этом сайте (верхняя строка)

Answer 1

если указать, что форма имеет ширину 100%, она будет занимать всю ширину родительского элемента, и в этом случае родительский элемент совпадает с родительским для плавающих элементов div.

Вы либоочистите ширину не всплывающих и оставьте остальные или укажите ширину всплывающих и очистите ширину не всплывающих.

Answer 2

Есть ли причина, по которой вы не хотите указывать ширину? Кажется, что их заголовок гораздо более многословен, чем необходимо. будет ли что-то подобное ниже сделать то же самое для вас?

<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>

Это должно работать в IE, но CSS может потребоваться настройка, чтобы компенсировать, насколько старше IE обрабатывает блочную модель.