Правильный способ плавать стихии

Question

У меня есть следующий HTML-код:

<fieldset>
    <legend>Details</legend>

    <div class="form-section first">
        <div class="abc">
            <div class="editor-label">
                <label for .../>
            </div>
            <div class="editor-field">
                <input type="text" ... />
            </div>
        </div>

        <div class="def">
           ...
        </div>

        <div class="ghi">
           ...
        </div>
    </div>

    <div class="form-section">

    </div>

    <div class="form-section last">
    </div>
</fieldset>

У меня есть набор полей, охватывающий все мои элементы формы.Набор полей содержит несколько разделов формы, которые в основном содержат одну «строку» содержимого.DIVs в разделах формы, которые я хочу плавать влево:

|||||||    |||||||      |||||||   <-- first form section, 3 floated elements

|||||||    |||||||||||            <-- second form section, 2 floated elements

Как правильно разместить эти элементы так, чтобы:

1) Второй раздел формы происходит на егособственная линия2) Второй раздел формы может применить верхнее поле.

Кажется, я не могу понять это правильно.Мне нужно решение для работы в IE7.Я попытался внести ясность: и то, и другое на элементе form-section, но, похоже, он не работал правильно.Все 5 элементов были в одной строке вместо двух отдельных строк.

** РЕДАКТИРОВАТЬ **

Я могу несколько заставить это работать.Моя проблема заключается в следующем: когда я перемещаю элементы в контейнере, они по существу имеют 0 высоту.Это портит все контейнеры, которые идут после него, если они хотят применить верхнее поле.

Answer 1

для ряда из трех попыток:

<div style="clear:both; width:100%;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <div style="float: right;"></div>
</div>
<div style="clear:both; width:100%; height:10px;"></div>
<div style="clear:both; width:100%;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

Это должно дать вам желаемый результат.

Answer 2

<fieldset>
            <legend>Details</legend>
            <div id="section 1">
                <span style="height: 500px;">1</span>
                <span style="height: 500px;">2</span>
                <span style="height: 500px;">3</span>
            </div>

            <div id="section 2" style="margin-top: 50px;">
                <span>4</span>
                <span>5</span>
            </div>

</fieldset>