Currently, I am attempting to enclose a series of elements within a box and showcase some text beneath 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>
Additional content here
</div>
In my current CSS script, it states:
.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 issue at hand is twofold. Firstly, the grey box surrounding my list of items does not encompass all the items. Secondly, the subsequent div containing text displays beside the item list rather than below it.
How can I expand the grey box to include all items and make the following div appear below the item list instead of alongside it?