I'm going to develop a web-based application for domestic use containing a database for all our DVDs. In that vein, I'd like to mention here a little problem occurred during the creation process of the markup used for displaying search results. The question is: floats or tables? Since I have to deal with items like director, year, actors and so on, using floats actually involves a markup like the following:
<ul class="dvd-info">
<li>
<div class="dvd-item">
<h4>Director</h4>
</div>
<div class="dvd-content">
<p>Ridley Scott</p>
</div>
</li>
<!-- more items here -->
</ul>
The CSS would be something like:
ul.dvd-info {
width: 100%;
margin: 0 0 0.4em 0;
padding: 0;
list-style: none;
}
ul.dvd-info li {
height: 100%;
overflow: hidden;
margin-bottom: 4px;
}
ul.dvd-info li .dvd-item {
float: left;
width: 25%;
text-align: right;
}
ul.dvd-info li .dvd-content {
float: left;
width: 70%;
padding-left: 0.3em;
}
The problem with this approach is that we're actually dealing with a semantic relationship between items (e.g. "Director" and "Ridley Scott") that will be completely lost if we use the aforementioned markup and floats. In fact, we should use a table heading associated with a table cell. This approach also makes our content easier to navigate for assistive technologies that use keyboard shortcuts to extract and navigate page contents. In this case, I think, using a table is the right choice.