Create tabs that grow and flex

I thought I would put together a little demo on how to create flexible tabs that grow. I’m sure a quick Google around will find other examples, but I think it’s a point worth highlighting as many people seem to forget that not everyone browses the web with the same font size.

Anyway back to the problem; so you have created a wonderful tabbed area, applied all of the styling then you come to test it and it breaks pushing the content down or wrapping the tabs underneath each other when the text size is increased or the browser window size is something like 800×600.

Let start with some simple HTML in the form of a list that we will use for our tabs:

<div id="mainNav">
  <ul>
    <li><a href="#">Consectetur adipisicing elit</a></li>
    <li><strong>Lorem ipsum dolor sit amet</strong></li>
    <li><a href="#">Sed do eiusmod tempor</a></li>
    <li><a href="#">Incididunt ut labore</a></li>
    <li><a href="#">Dolore magna aliqua</a></li>
  </ul>
</div>

There is no real trick to this other than avoiding using floats. To get the <li> inline we can use display: inline-block; and set the width (for example, 100% / number of tabs):

#mainNav ul li {
  width: 20%;
  display: inline-block;
  vertical-align: bottom;
}

Simple. Remember to add vertical-align: bottom; to the <li> so they line up correctly.

Finally, you may notice that Firefox decides to put some extra space in between each tab, even though you didn’t ask for any margin! To resolve this we need to adjust the word spacing of the elements by setting its container (the <ul>) to word-spacing: -1em; to remove the white space, then set the back to word-spacing: 0; for the <li>, otherwise the text will get squished.

It’s worth noting that this fix does not work for Safari, which required another fix detailed below.

Done – well not quite. The tricky part to the method is getting them to work cross-browser:

IE6 & IE7

The attribute display: inline-block; was not supported way back when these browser were launched, as such we need to set IE6 and 7 to display: inline;. Also IE can be a bit buggy when width’s add up to exactly 100% so we add a little tweak to fix that too. These styles go in out conditional style sheet(s).

#mainNav ul li {
  display: inline;
  width: 19.9%;
}

Safari (WebKit)

So the word-spacing fix did not remove the white space in Safari for you huh? Painful isn’t it. Safari and by that I mean WebKit browsers seem to calculate white space a little differently. To fix this we have to remove the ACTUAL white-space from the HTML. So your HTML for the <ul> is on the same line:

<ul><li>list item</li><li>list item</li><li>list item</li><li>list item</li></ul>

Now if this doest appeal to you there are other methods such as this:

<ul><li>
list item</li><li>
list item</li><li>
list item</li><li>
list item</li>
</ul>

But each is as horrible and annoying as the next if, like me, you prefer to have nicely formatted code. It is also worth point out that if you have read this and are willing to mess-up your HTML to fix Safari, then this should also resolve the white space bug in Firefox, which means you no longer need the word-spacing: -1em; fix.

See the Pen Tabs that grow and flex by Matt Lawson (@lawlesscreation) on CodePen.

So there we have it, your growing, flexible tabs. Now I know this might not suite all scenarios and there are other methods of achieving similar effects (using display: table-cell; for example) but I find this method works well for me.