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.