StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>See:</strong> <a href="http://jsfiddle.net/thirtydot/EDp8R/" rel="noreferrer">http://jsfiddle.net/thirtydot/EDp8R/</a></p> <ul> <li>This works in <strong>IE6+ and all modern browsers!</strong></li> <li>I've halved your requested dimensions just to make it easier to work with.</li> <li><code>text-align: justify</code> combined with <code>.stretch</code> is what's handling the positioning.</li> <li><code>display:inline-block; *display:inline; zoom:1</code> fixes <code>inline-block</code> for IE6/7, <a href="https://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575">see here</a>.</li> <li><code>font-size: 0; line-height: 0</code> fixes a minor issue in IE6.</li> </ul> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#container { border: 2px dashed #444; height: 125px; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; /* just for demo */ min-width: 612px; } .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 } .box1, .box3 { background: #ccc } .box2, .box4 { background: #0ff }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <span class="stretch"></span> </div></code></pre> </div> </div> </p> <p>The extra <code>span</code> (<code>.stretch</code>) can be replaced with <code>:after</code>.</p> <p>This <strong>still works</strong> in all the same browsers as the above solution. <code>:after</code> doesn't work in IE6/7, but they're using <code>distribute-all-lines</code> anyway, so it doesn't matter.</p> <p><strong>See:</strong> <a href="http://jsfiddle.net/thirtydot/EDp8R/3/" rel="noreferrer">http://jsfiddle.net/thirtydot/EDp8R/3/</a></p> <p>There's a minor downside to <code>:after</code>: to make the last row work perfectly in Safari, you have to be careful with the whitespace in the HTML.</p> <p>Specifically, this doesn't work:</p> <pre><code><div id="container"> .. <div class="box3"></div> <div class="box4"></div> </div> </code></pre> <p>And this does:</p> <pre><code><div id="container"> .. <div class="box3"></div> <div class="box4"></div></div> </code></pre> <hr> <p>You can use this for any arbitrary number of child <code>div</code>s without adding a <code>boxN</code> class to each one by changing</p> <pre><code>.box1, .box2, .box3, .box4 { ... </code></pre> <p>to</p> <pre><code>#container > div { ... </code></pre> <p>This selects any div that is the first child of the <code>#container</code> div, and no others below it. To generalize the background colors, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" rel="noreferrer">CSS3 nth-order selector</a>, although it's only supported in IE9+ and other modern browsers:</p> <pre><code>.box1, .box3 { ... </code></pre> <p>becomes:</p> <pre><code>#container > div:nth-child(odd) { ... </code></pre> <p><strong>See <a href="http://jsfiddle.net/EDp8R/3903/" rel="noreferrer">here</a></strong> for a jsfiddle example.</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