Is it good to use float in table less design?

Question

Is it good to use float in table less design? What is the pros/cons of float in the context of table less cross browser compatible design? Is there any the best practices guidelines for cross browser compatible tableless design?

Answer 1

This is a bit like asking "should I use arrays?". The answer in both cases is "it depends (on what you're trying to achive)".

Floats are not only useful, backwards compatible and arguably necessary (with or without tables) but that's not really the point. You use them because it allows you to achieve the desired results.

Like everything they have strengths and weaknesses. Most notably, floats work best with fixed width content. Having the float be as wide as it needs to be tends to be where such layouts fall down.

Edit: in relation to the comment regarding IE treating them differently, two rules of thumb apply:

• always declare a DOCTYPE on your documents. This forces IE from "quirks" to "standards compliant" mode (both euphemisms); and
• always use a reset CSS (there are others).

That being said, you still have to test your pages in the major browsers but in my experience it's not that difficult to write something out of the box that mostly works on all browsers and simply needs to be tweaked after the fact.

Answer 2

Don't forget to use tables for tabular data, I've seen many designers create tables of events and users etc just with lists and floats.

Answer 3

Using floats in a table-less design (and Moak is right - you should use tables for tabular data) is pretty much the accepted best practice. There are exceptions, of course - you could use positioning, but that opens up a completely new can of worms (especially when it comes to browser compatibility issues).

As long as you take the time to ensure that your floats are cleared properly (http://www.positioniseverything.net/easyclearing.html and http://www.quirksmode.org/css/clearing.html for two varying approaches; my preference is the latter, but like everything - the appropriate answer there is "it depends"), you shouldn't run in to too many issues. Also, like Cletus mentions, declare your DOCTYPE.

An important thing to note, of course, is that you will run into more issues IE-related issues, increasing as you go down in version numbers (IE8 is pretty decent, 7 less so and, well, we all know about IE6's relationship to modern CSS).

To answer your "pros/cons" question - the pros are that you don't have presentational code written in to the document's markup, since you can apply CSS rules to any element, which means your document is smaller in size (not that that's a huge concern any longer, but for some it still is), and (more importantly) you aren't locked in to any specific design decision.

The only real cons are that there are some potential browser compatibility issues (and the occasional strange behavior), but most of those are documented and have well-addressed solutions.