Equally distributed nav bar with hover that fills the entire li element

Question

I've tried to find a solution to my problem and a lot of others problems have been similar but I cant quite seem to crack this one. CSS has never been my strong point so Im trying to get a better grasp on fluid layouts.

I have a nav bar with 3 links. I want each link to take up an equally distributed amount of space and when the user hovers over the link i want the entire li element to highlight. The problem I have is that the last small section on the far right side of the nav bar always leaves a space when its being hovered over. It drives me crazy. Also if you reduce the browser size eventually the left most link will pop down. I also want to try and avoid this but I cant seem to get it to work. Jsfiddle here

Any suggestions?

HTML:

<nav>
        <ul>
            <li>
                <a href="managers.html">
                    Building Managers and Owners
                </a>
            </li>
            <li>
                <a href="contractors.html">
                    Contractors
                </a>
            </li>
            <li>
                <a href="architects.html">
                    Architects
                </a>
            </li>
        </ul>
    </nav>

CSS:

nav {
    background:     #303030;
    font-size:      1em;
    font-weight:    100;
    height:         40px;
    line-height:    40px;
    margin:         0 auto 2em auto;
    padding:        0;
    width:          100%;

    border-radius:          5px;
    -moz-border-radius:     5px;
    -webkit-border-radius:  5px;

}

nav ul{
    width:      100%;
    maring:     0;
    padding:    0;
    overflow:   hidden;
    list-style: none;
}

nav li {    
    width:          33.1%;
    float:          left;
    text-align:     center;
    border-left:    1px inset;
    border-right:   1px inset;
    padding:0;
}


nav a:link, nav a:visited
{
    color:              #FFF;
    text-decoration:    none;
}

nav li:hover {
    background:     #556e8c;
}

nav li:first-child  {
    border-right:   1px inset;
    border-left:    none;
}

nav li:last-child  {
    border-right:   none;
    border-left:    1px inset;
}




nav li:first-child:hover  {

    border-top-left-radius:             5px;
    -moz-border-radius-topleft:         5px;
    -webkit-border-top-left-radius:     5px;
    border-bottom-left-radius:          5px;
    -moz-border-radius-bottomleft:      5px;
    -webkit-border-bottom-left-radius:  5px;
    }

nav li:last-child:hover  {
    border-top-right-radius:                5px;
    -moz-border-radius-topright:            5px;
    -webkit-border-top-right-radius:        5px;
    border-bottom-right-radius:             5px;
    -moz-border-radius-bottomright:         5px;
    -webkit-border-bottom-right-radius:     5px;
}    

Answer 1

Using display: table (and table-cell, this is CSS table layout unrelated to the use of HTML table elements and their poor semantics when they aren't for displaying data...) allows the links to stay on one row. I think it also solves your problem of gap on the right but I'm not sure.

http://jsfiddle.net/53dpC/2/

• Each li is displayed as display: table-cell and a parent as display: table. Here ul is displayed as row but in such a simple case, it could be displayed as display: table and nav displayed as it should by default (as a block).
• Beware that on Firefox, it's quite strict and there's no margin or padding on a "row", no background-color, etc
• No margin on "cells", but padding is OK. border-collapse and border-spacing also work. The "table" can have a margin, as an HTML table could have.
• table-layout: fixed triggers the other table layout algorithm, very different: width you set are displayed by browsers. Without it, browsers will adapt to the length of content (and they can make wonders with very strange content, but that's not usually what you intend!)
• Prefixes on border-radius aren't necessary anymore: they were for versions of Firefox and Chrome/Safari that now have quite disappeared: Fx 3.6, Android 2.1, Safari 4- (caniuse)