CSS floats or tables? A practical approach

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.

Leave a Reply

Note: Only a member of this blog may post a comment.