StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>HTML</strong></p> <p>EDIT: it's 2015 and HTML5 has been there for a while; following code should be inside a <code>nav</code> element (<a href="http://html5doctor.com/nav-element/" rel="nofollow noreferrer">html5doctor</a>) with landmark ARIA attribute <code>role="navigation"</code> on it (and 99.9% of the time be unique in any given page).</p> <p>A navigation panel should use an unordered list of links:</p> <pre><code><ul id="nav"> <li><a href="#">One</a></li> <li><a href="#"> Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth and last, so large that... worst case</a></li> </ul> </code></pre> <p><strong>CSS</strong></p> <p>EDIT2: It's 2017, just use <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">Flexbox</a> (with or without <code>flex-wrap: wrap</code>)</p> <p><code>inline-block</code> is useful but has one drawback: whitespace between two elements must be carefully managed. Whether removed or no <code></li></code> in HTML5 or <code></li></code> at the beginning of the following line stuck like <code></li><li>next item</code> or other tricks, you still have to do something or it'll create a ~4px gap between 2 elements. </p> <p>25% + 25% + 25% + 25% doesn't equal 100% on all browsers if the total isn't a multiple of 4. Each browser has its own rounding method.</p> <p>If you want elements to total 100% width and equal width, another method is to use <strong><code>display: table</code></strong> (and <strong><code>table-cell</code></strong>) with <strong><code>table-layout: fixed</code></strong> to force browsers to use the <em>other</em> table algorithm, the one that doesn't try to adapt cells width to content but respect the widths wanted by the designer/developer as far as possible.</p> <pre><code>ul { margin: 0; padding: 0; } li { list-style-type: none; } #nav { display: table; table-layout: fixed; text-align: center; } #nav li { display: table-cell; width: 25%; padding-right: 1px; height: auto; vertical-align: bottom; } #nav a { display: block; min-height: 100%; padding: 4px 10px; background-color: #222; color: white; border-radius: 6px 6px 0 0; } </code></pre> <p><strong>Fiddle</strong></p> <p><a href="http://jsfiddle.net/PhilippeVay/aHCy3/1/" rel="nofollow noreferrer">http://jsfiddle.net/PhilippeVay/aHCy3/1/</a><br> edit: <a href="http://jsfiddle.net/PhilippeVay/aHCy3/2/" rel="nofollow noreferrer">http://jsfiddle.net/PhilippeVay/aHCy3/2/</a> with another method for space between each tab, courtesy of my colleague.</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