CSS display:table content height

Question

I am trying to make a number of columns the same height, and have decided to go down the display:table CSS route.

<div class="header" style="display: table; width: 100%; background-color: yellow">
  <div class="title" style="font-size: 30px; display: table-cell;">Navigation Title</div>
  <div class="navigation" style="display: table-cell;">
    <a class="navigation-link" style="background-color: red">Home</a>
    <a class="navigation-link">About</a>
    <a class="navigation-link">Contact</a>
  </div>
</div>

I would like the navigation-links to the the full height of the header table (so as to add background-color to them), but the navigation seems to have some padding automatically added to the top and bottom. How would i set the height of navigation, and navigation-links to be the height of the header table.

I have tried using height:100% in various places but that did not seem to work (I am probably missing something). Here is a diagram to show what i mean:

Answer 1

Try to play with display: inline-block;, vertical-align: top;, padding-top and height of your navigation links:

.navigation {
    ...
    vertical-align: top;
}
.navigation-link {
    ...
    display: inline-block;
    height: 100%;
    padding: 7px 5px;
}

Demo: http://jsfiddle.net/y8AF5/

Answer 2

This seems to solve your problem : DEMO

CSS

.navigation > a {
    display:inline-block;
    border:1px solid #CCC;
    line-height:2.5em;

}

What you have done so far is styling the classes but no styling was done for a tag.

Now, the trick is to change the display type of a and using line-height to provide appropriate spacing of full height!!!