Question

I’m trying box up a list of elements and display a some text below it:

<div class="ft_models">
    <dl>
        <dt>Models:</dt>
        <dd>
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </dd>
    </dl>
</div>

<div>
    Some stuff here
</div>

So far, my CSS reads

.ft_models
{
    margin: 10px 5px 10px 0;
    padding: 10px;
    background-color: #F8F8F8;
    color: #000;
}

.ft_models dt
{
    display: inline;
    float: left;
    clear: left;
    margin: 0 0.5em 0 0;
}
.ft_models dd
{
    display: inline;
    float: left;
    margin: 0 0.5em 0 0;
}

The problem is that first, the grey box for my Item list does not extend around all the items. The second problem is that the subsequent div (Some stuff here) displays to the side of the item list instead of below.

How do I extend the grey box around the item list and have the following div display below it instead of to the side?

http://jsfiddle.net/96pfX/

Answer 1

You need to clear the float:

http://jsfiddle.net/WFnKw/