100% height links in inline navigation with varying <li> heights

Question

First time caller, long time listener...

I'm trying to set up the styles for horizontal tab-looking navigation. However, in its usage I need it to accommodate links of varying lengths that may make any li wrap to multiple lines. But when it does, the other links don't fill 100% height.

Here's a jsfiddle example: http://jsfiddle.net/Rothgarr/qL47V/

As you can see, link two is taller and it wraps - so links one, three and four don't fill that space. And in this example one of the links wraps to two lines, but in reality they may wrap to three or four, etc. so I can't define a height. How do I get all the other links to fill that space? (not just the background color)

Here's my stripped down html:

<ul>
    <li><a href="#">This is item one</a></li>
    <li><a href="#">This is item two it's very long</a></li>
    <li><a href="#">This is item three</a></li>
    <li><a href="#">This is item four</a></li>
</ul>

And here's my stripped down css:

ul, li {
margin: 0px;
padding: 0px;
list-style: none;}

ul {
border-bottom: solid 1px #000;
overflow: hidden;}

li {
float: left;
width: 120px;
margin-right: 10px;
text-align: center;}

a {
display: block;
background-color: #ccc; }

I tried the following: As many combinations of floats and inline-block as I could think of / Displaying the ul as a table and each li as a table-cell / Using relative and absolute positioning to try to fill each space

Other notes: As I mentioned above, I can't define a height since I don't know how many lines there will be / I pretty sure I have to support sigh IE8

Any ideas? Bonus points: How do I get the shorter links to align to bottom?

Answer 1

Pure CSS solution

If you're feeeling adventurous, you can always try CSS flexbox: it is designed specifically for layouts like this that are hard to achieve in conventional CSS methods. However, it does not work in older browsers, only in modern ones.

ul, li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul {
    border-bottom: solid 1px #000;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

li {
    display: flex;
    align-items: stretch;
    width: 120px;
    margin-right: 10px;
    text-align: center;
}

a {
    display: block;
    flex: 1 1 auto;
    background-color: #ccc; 
}

The explanation behind my code:

• Set <ul> to display flex, and stretch all children vertically (align-items: stretch)
• Set <li> to display flex, too — so that we can force it's inner child to stretch vertically, too.
• Set <a> to flex: 1 1 auto, such that it will grow and shrink automagically. Width can be auto or 100%, it does not matter in this case.

Here is the fiddle: http://jsfiddle.net/teddyrised/qL47V/7/

JS-based solution

You can also use a JS-based solution (I have used jQuery, but you can of course use other libraries). The strategy is simple:

1. Get the original height of links in the list
2. Find the maximum value, and assigns it to all links

This is rather straight forward when writing in jQuery:

var heights = [];
$('ul a').each(function() {
    heights.push($(this).height());
}).height(Math.max.apply(Math,heights));

However, you should take note that these few lines of script will have to be re-run whenever the dimensions of the links are changed such that it will affect the height.

See fiddle: http://jsfiddle.net/teddyrised/qL47V/9/

Answer 2

I'm assuming when you say you want the links to fill that space, you mean that you want the background to fill the entire space. That being said, you can do that with the following:

ul {
  display: table;
}
li {
  display: table-cell;
  background-color: #ccc;
  vertical-align: bottom;
}

Fiddle: http://jsfiddle.net/qL47V/3/

As you can see, if you put the background on the list item (which is set to display: table-cell) it will then fill the whole space.

There may be nicer ways to do this (I personally hate styling things as tables), but this will get you where you need to go.