What Is The Benefit Of Tableless Design If You Need Clearing Blocks Everywhere?

Question

I understand that the goal of moving towards

tags from makes sense since it is more semantic. However, I don't understand the benefit gained if you still

Solution 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;
}

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

JSFiddle

Solution 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.

Solution 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.

Solution 4:

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

Solution 5:

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 that the zoom property is IE specific and doesn't validate, but there are no side effects like there can sometimes be with other properties, like overflow: auto.

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

Html5 Developer