An image gallery with a definition list and CSS

Building an image gallery with a definition list (dl) and CSS can be very interesting. We start with a basic markup like this:

<dl id="gallery">

<dt><img src="img/duck.png" alt="Duck" /></dt>
<dd>
<ul>
<li>
<h3>A duck</h3>
<p>Uploaded: Sat, June 19 2010</p>
</li>
</ul>
</dd>


<dt><img src="img/boat.png" alt="Boat" /></dt>
<dd>
<ul>
<li>
<h3>A boat</h3>
<p>Uploaded: Sat, June 19 2010</p>
</li>
</ul>
</dd>

</dl>

We want the image be on the left and the description on the right. Here is how it can be done with CSS:

#gallery {

    height: 100%;
    overflow: hidden;
    padding: 1em 0;
    border: 5px solid gray;
    border-width: 5px 0;


}

#gallery dt {

    float: left;
    width: 200px;
    margin: 0;
    clear: left;

}

#gallery dd {

    
    margin: 0 100px 0 0;
    padding: 5px 0;
    border: 1px dashed gray;
    border-width: 1px 0;
    width: 200px;
    float: right;
    display: inline;

}

#gallery dd ul {

    margin: 0 auto;
    width: 90%;
    padding: 5px;
    list-style: none;
    border: 2px solid gray;
    border-radius: 3px;
    -moz-border-radius: 3px;

}

#gallery dd h3 {

    margin: 0;
    font: normal 1.4em "Trebuchet MS", Trebuchet, sans-serif;
    color: #666;
    border-bottom: 1px dashed;

}

#gallery dd p {

    font-style: italic;
    margin-top: 0;
    padding-top: 4px;

}

We've used the float property to align our boxes. The declaration display: inline avoids the infamous doubled margin bug in Internet Explorer 6. Our floats appear on different lines simply because there is no more space available to display them on a single line (this is one of the several rules defined by the CSS specifications). You can see the final result here.