HTML & CSS: How to create four equal size tabs that fill 100% width?

css, html, navigation

Solution

HTML

EDIT: it's 2015 and HTML5 has been there for a while; following code should be inside a `nav` element (html5doctor) with landmark ARIA attribute `role="navigation"` on it (and 99.9% of the time be unique in any given page).

A navigation panel should use an unordered list of links:

<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>

CSS

EDIT2: It's 2017, just use Flexbox (with or without `flex-wrap: wrap`)

`inline-block` is useful but has one drawback: whitespace between two elements must be carefully managed. Whether removed or no `</li>` in HTML5 or `</li>` at the beginning of the following line stuck like `</li><li>next item` or other tricks, you still have to do something or it'll create a ~4px gap between 2 elements.

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.

If you want elements to total 100% width and equal width, another method is to use `display: table` (and `table-cell`) with `table-layout: fixed` to force browsers to use the other 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.

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;
}

Fiddle

http://jsfiddle.net/PhilippeVay/aHCy3/1/ edit: http://jsfiddle.net/PhilippeVay/aHCy3/2/ with another method for space between each tab, courtesy of my colleague.

Problem

Original source