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?

Answer 2

Not at all. There are LOTS of other benefits to avoid using tables.

• http://stackoverflow.com/questions/30251/tables-instead-of-divs
• http://stackoverflow.com/questions/96137/divs-vs-tables-a-rebuttal-please
• http://stackoverflow.com/questions/61250/divs-vs-tables-or-css-vs-being-stupid

Answer 3

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 4

As annakata's answer shows, you don't need those clearing blocks. But apart from this, one advantage to avoiding tables is that the page can be rendered progressively. A table can only be rendered when the entire table, including all its contents, has been parsed, which may take a while if you have a big page and a slow connection. divs can be rendered immediately, which means you might be able to present something usable to the user much sooner than with tables.

Of course, this is just a nice little bonus advantage, it isn't, and shouldn't be the reason to avoid tables (for non-tabular data)

Answer 5

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.

Answer 6

I personally use the clearfix hack for my clearing needs.

/* Clearfix */
#content:after,
.box:after,{
  content:'.';
  display:block;
  clear:both; 
  visibility:hidden; 
  height: 0;}
#content,
.box{zoom:1;/*IE*/}

Notice I just comma separate the selectors rather than adding the clearfix class to everything. it works really well. The only problem is the zoom property is IE specific and doesn't validate, but there's no side affectls like there can sometimes be with other properties like overflow:auto.

I've been using this in professional websites for 2 years with no problems.