Question

I have the following 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>

I have a fieldset that is wrapping all of my form elements. The fieldset contains multiple form sections, which basically hold one “row” of content. The divs in the form sections I want to float to the left:

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

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

What is the proper way to float these elements so that:

1) The second form section occurs on its own line.
2) The second form section can apply a top margin.

I can’t seem to get it right. I need the solution to work in IE7. I tried putting a clear: both on the form-section element but it didn’t seem to work right. All 5 elements occurred on the same line instead of 2 separate lines.

** EDIT **

I can somewhat get this to work. My issue is the following:
When I float the elements within a container, they essentially have 0 height. This messes up any containers that come after it if they want to apply a top margin.

Answer 1

for the row of three try:

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

That should get you the desired output.