CSS Border around floating divs (see image)

[tdktank59]

http://img2.imageshack.us/img2/7510/75355459.png

Anyways im trying to float 6 divs inside a div with some padding, margin and a border (as seen in the image (filters section)

What im trying to do is get the border to go all the way down to below the filter dropdowns (to make it all boxed in)

Heres the css and code for that section.
CSS:

.left_2 {
    float: left;
    width: 50%;
}
.filters {
    border: 1px solid #CCCCCC;
    padding: 10px;
    margin: 10px;
}
.filters h7 {
    font-weight: bold;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
}

Code:

<div class="filters">
    <h7>Filter By:</h7><br />
        <div class="left_2">
            <b>Work Category:</b>
                <select name="work_category">
                    <option value="">Select a Value</option>
               </select>
        </div>
        <div class="left_2">
            <b>Sets:</b>
                <select name="sets">
                    <option value="">Select a Value</option>
                </select>

        </div>

        <div class="left_2">
            <b>Employer Code:</b>
                <select name="employer_code">
                    <option value="">Select a Value</option>
                </select>
        </div>
        <div class="left_2">
            <b>Error Type:</b>
                <select name="error_type">
                    <option value="">Select a Value</option>
                </select>
        </div>

        <div class="left_2">
            <b>Status:</b>
                <select name="status">
                    <option value="">Select a Value</option>
                </select>
        </div>
        <div class="left_2">
            <b>Phase:</b>
                <select name="phase">
                    <option value="">Select a Value</option>
                </select>
        </div>
</div>

 

[sickwookie]

I would just add and empty div below the content and set its clear property to both.

<div class="filters">
    <h7>Filter By:</h7><br />
        <div class="left_2">
            <b>Work Category:</b>
                <select name="work_category">
                    <option value="">Select a Value</option>
               </select>
        </div>
        <div class="left_2">
            <b>Sets:</b>
                <select name="sets">
                    <option value="">Select a Value</option>
                </select>

        </div>

        <div class="left_2">
            <b>Employer Code:</b>
                <select name="employer_code">
                    <option value="">Select a Value</option>
                </select>
        </div>
        <div class="left_2">
            <b>Error Type:</b>
                <select name="error_type">
                    <option value="">Select a Value</option>
                </select>
        </div>

        <div class="left_2">
            <b>Status:</b>
                <select name="status">
                    <option value="">Select a Value</option>
                </select>
        </div>
        <div class="left_2">
            <b>Phase:</b>
                <select name="phase">
                    <option value="">Select a Value</option>
                </select>
        </div>
        [COLOR="Red"]<div style="clear: both;"></div>[/COLOR]
</div>

 

[MorfiusX]

I would just add and empty div below the content and set its clear property to both.

This is what I do. If you are are keeping your CSS in a seperate file (reccomended), the add the following to your CSS:

.clear {clear:both}


And your HTML would be:

<div class="clear"></div>

 

[tdktank59]

Thanks