StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Using floats in a table-less design (and <a href="https://stackoverflow.com/questions/2513182/is-it-good-to-use-float-in-table-less-design/2513204#2513204">Moak</a> 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).</p> <p>As long as you take the time to ensure that your floats are cleared properly (<a href="http://www.positioniseverything.net/easyclearing.html" rel="nofollow noreferrer">http://www.positioniseverything.net/easyclearing.html</a> and <a href="http://www.quirksmode.org/css/clearing.html" rel="nofollow noreferrer">http://www.quirksmode.org/css/clearing.html</a> 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 <a href="https://stackoverflow.com/questions/2513182/is-it-good-to-use-float-in-table-less-design/2513192#2513192">Cletus</a> mentions, declare your <code>DOCTYPE</code>.</p> <p>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).</p> <p>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.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload