StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The technique is known as a "<a href="http://www.alistapart.com/articles/practicalcss/" rel="nofollow">spacer div</a>" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:</p> <pre><code><div class="container"> <div style="float:left"> ... <div style="float:left"> ... </div> <div style="clear:both">&nbsp;</div> </div> </code></pre> <p>The inner <code>div</code>s are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The <code>&nbsp;</code> is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <code><div style="clear:both"/></code> didn't always work - you really needed a <code>div</code> with actual (though invisible and nonsensical) content to make it work everywhere.</p> <p>It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. <a href="http://www.cs.hmc.edu/~mbrubeck/clear-after/" rel="nofollow">using the :after CSS pseudo class</a>. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. <a href="http://www.quirksmode.org/css/clearing.html" rel="nofollow">Another great article</a> with a different solution.</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