9

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?

Stanislav Kralin
  • 11,070
  • 4
  • 35
  • 58
Shawn
  • 19,465
  • 20
  • 98
  • 152
  • 5
    For what it's worth, if you're displaying tabular data (and it looks like you are) you should still use a table. – Akrikos Feb 18 '09 at 18:55

6 Answers6

31

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

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
annakata
  • 74,572
  • 17
  • 113
  • 180
  • I think you'll find it is, the magic word being "hasLayout" - try ctrl+f for IE6 on any of those three links – annakata Jan 02 '09 at 17:17
  • 2
    IE8 finally gets rid of the hasLayout nonsense. About 10 years overdue, but we have to take what we can get... :) – jalf Jan 02 '09 at 17:22
11

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.

Eran Galperin
  • 86,251
  • 24
  • 115
  • 132
8

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.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Jörg W Mittag
  • 363,080
  • 75
  • 446
  • 653
  • There is some meaning to a div - division. – alex Feb 28 '09 at 23:14
  • Look at his example, it has far better semantics than a table-based equivalent. The divs indicate that the contained information is semantically related. The classes such as "personal-information" semantically identify the information. All you've said here is "if you assign classes really badly and use the wrong tags, it's not more semantic. Well duh! – Draemon Jul 31 '09 at 12:53
1

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

Community
  • 1
  • 1
Vinko Vrsalovic
  • 330,807
  • 53
  • 334
  • 373
  • im talking about in this specific situation, a 2 column layout – Shawn Jan 02 '09 at 17:08
  • The answer is valid to that specific situation as well. It's a lot better to use what you have than use tables. This way you have 1 extraneous tag (which can be mostly ignored), the other way you'd have at least 10 which cannot be ignored. – Vinko Vrsalovic Jan 02 '09 at 17:12
  • Additionally, it seems to be superfluous, as annakata's link shows. – Vinko Vrsalovic Jan 02 '09 at 17:13
1

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.

Jethro Larson
  • 2,337
  • 1
  • 24
  • 24
0

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)

jalf
  • 243,077
  • 51
  • 345
  • 550