Question

I am trying to make a horizontal nav that can contain multi-line content in each navigation element and have each item’s height be the same.

Here is a partial solution that should explain what I’m after, using display:table.

Unfortunately display:table doesn’t work in Internet Explorer 7 which (+html5 shiv) will be the primary browser for viewing the page (corporate and internal). Even here the problem is that the <a> only fills up as much space as the content, when I want it to be active everywhere inside the li (as if the <a> tag were wrapping the <li>, which is not allowed)

I want it to be as semantic as possible, and hopefully not use tables (though if that’s the only way.. it’s the only way). Is there any way to achieve this? (even in a table right now it’s not quite working)

Answer 1

Is it an option to use jQuery?

You could solve it then this way: http://jsfiddle.net/nywYz/2/