What is the benefit of tableless design if you need clearing blocks everywhere?

Question

I understand that the goal of moving towards <div> tags from <table> makes sense since it is more semantic. However, I don't understand the benefit gained if you still need a clearing block to make column-based layouts work. For example:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

The extraneous <br> tag is used strictly to describe style, and is required to make the layout work. Doesn't this ruin all benefits gained from removing tables?

Answer 1

What if I told you you didn't need a clearing block?

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

Answer 2

If you are displaying tabular data, it still makes more sense to use tables then many floated divs. Use the tools you have wisely - don't blindly use CSS where tables are the best option.

Answer 3

I understand that the goal of moving towards <div> tags from <table> makes sense since it is more semantic.

Actually, it's exactly the opposite: moving from <table> to <div> makes your HTML less semantic. In fact, the whole point of the <div> (and <span>) elements is to have no semantics!

It always ticks me off, when I see a forest of <div>s described as "semantic HTML". No, it's not! That's *un-*semantic HTML! Especially if it contains a lot of <div class='float-left'>, <div id='bottom'> and my personal favorites <div class='paragraph'> and <span class='emphasis'>.

Don't get me wrong, using un-semantic <div>s is certainly better than using wrong-semantic <table>s, but even better would be to use the semantically correct elements – although in many cases the problem is that HTML doesn't offer any. In your snippet for example, you use the <address> element, but according to the specification, this element is not meant for marking up addresses! It is only for marking up the address of the author of the page – IOW it's utterly useless.

The example that you posted is missing a lot of context, so it is hard to say, but it actually looks like you might want to display either tabular or hierarchical data, in which case <table>s or <ul>s might be a better choice.

---

Totally unrelated to your question: you might want to take a look at the hCard and XOXO microformats.