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

Question

I am trying to create a navigation panel for my website. I would like it to consist of:

Four tabs in equal size with text-centered in each tab.
They should fill the whole page width.

I would really like the design to be flexible and browser friendly. I have tried various float techniques, but I can't get it to work. I hope that you can help me out!

Thank you.

FelipeAls · Accepted Answer · 2017-10-13T08:24:42.757

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.

Oops, in fact I forgot to remove the 2 other `.tab` from their respective list item. As there's an id `#nav` on `ul`, this class isn't needed anymore, li are styled with the selector `#nav li`. Fiddle, link and HTML code edited. — FelipeAls, Aug 19 '12 at 10:37
another method for space between each tab: see the new fiddle (with `border-spacing`) — FelipeAls, Aug 22 '12 at 15:01

Ayush · Answer 2 · 2012-08-18T14:46:06.100

5

You don't need floats for this. Just set the width to 25%, or a tiny bit less than 25%. If you're using this on a block level element, set display: inline-block. This will work for all browser sizes, as well as respond to window resize.

HTML

<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>

CSS

body, html {
    width: 100%;
    padding: 0;
    margin: 0;
}
.nav {
    width: 24%; /*Slightly less than 1/4th of the width*/ 
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}

Live demo

edited Aug 18 '12 at 14:46

answered Aug 18 '12 at 14:36

Ayush

41,754
51
164
239

+1, but you might want to update the demo, because the current revision still has `width: 25%`. – Chris Aug 18 '12 at 14:41
Done. Also added `text-align:center` since OP wants the text to be centered. – Ayush Aug 18 '12 at 14:46
Why 24% and not 25%? Adding [outline: 1px dashed darkred;](http://jsfiddle.net/eNkce/5/) shows that width isn't of 100% exactly. 24.5% would be better (but still not perfect, for the same reason) – FelipeAls Aug 18 '12 at 14:50
Shouldn't you put the 4 divs inside another "wrapper" div, and center that? – reformed Aug 18 '12 at 15:34
A "navigation panel" shouldn't use `div` elements but nav>ul>li*4>a (in ZenCoding notation) in HTML5 (same with no nav in HTML4.01/XHTML1.0) – FelipeAls Aug 19 '12 at 10:34

mash · Answer 3 · 2012-08-18T15:01:37.420

0

css:

.tab {
    float: left;
    width:25%;
    height:25px;
    background:black;
    border:1px solid #fff;
    box-sizing: border-box;
}

html:

<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>

jsfiddle: http://jsfiddle.net/zP7Xh/6/

edited Aug 18 '12 at 15:01

answered Aug 18 '12 at 14:35

mash

14,851
3
30
33

Why would you need `inline-block` if you float them? It'll also need two prefixed box-sizing property and a clearfix on parent. – FelipeAls Aug 18 '12 at 14:45
Box sizing is so the borders do not increase the width of the buttons, for display purposes. This css works fine, look at the jsfiddle. – mash Aug 18 '12 at 14:53
(it doesn't work in the browser I use as I don't use Chrome but that's just vendor prefixes to be added later like I did in my fiddle) My point isn't about `box-sizing` but `inline-block`: remove `inline-block` and it still works. Floating elements that are renderd as `block` by default is already OK, no need to change their display. – FelipeAls Aug 18 '12 at 14:59
Ah I misread, the display is unnecessary indeed, and I did only test on Chrome. – mash Aug 18 '12 at 15:01

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

3 Answers3

Linked