CSS: an image gallery with table values

Image galleries are usually built with floats. That's fine, but we can also use CSS table values to accomplish this task. To start with, let's draw a simple HTML structure:

<ul id="gallery">

<li>

 <div class="box-img">
 
     <img src="img/1.jpg" alt="Test image" />
     <p>Caption text</p>
 
 </div>
 
 <div class="box-img">
 
     <img src="img/2.jpg" alt="Test image" />
     <p>Caption text</p>
 
 </div>
 
 <div class="box-img">
 
     <img src="img/3.jpg" alt="Test image" />
     <p>Caption text</p>
 
 </div>

</li>
<!--more-->
</ul>

And here are our CSS styles:

#gallery {
    width: 490px;
    margin: 0 auto;
    padding: 0;
    display: table;
}

#gallery .box-img {
    width: 152px;
    padding: 5px;
    border: 1px solid #cbcbcb;
    font-size: 1.2em;
    display: table-cell;
}

#gallery .box-img img {
    display: block;
    width: 100%;
}

#gallery .box-img p {
     text-align: center;
     margin: 0;
     padding: 4px 0;
     color: #666;
     font-variant: small-caps;
}

#gallery li {
    list-style: none;
    display: table-row;
}

We've turned all block-level elements in table, table row and table cell elements, respectively. You can see the final result here.