css - dynamic width horizontal lists

I'm trying to build a horizontal list based menu. In this menu, the two left floated menu links are fixed width, while the remaining menu links are floated right.

The issue is I'd like the two fixed width links to stay as is, however the floated right items to be spaced evenly throughout the rest of the available whitespace.

See my fiddle

CSS:

    #footer_menu {
        margin: 0;
        height: 54px;
        padding: 0px;
    }
    #footer_menu  ul {
        margin: 0;
        height: 54px;
        padding: 0px;
        display: table;
        table-layout: fixed;
        width:100%;
    }
    #footer_menu li {
        list-style: none;
        padding: 0px;
    }
    #footer_menu .nav_l {
        float: left;
        display: table-cell;
        white-space:nowrap;
    }
    #footer_menu .nav_r {
        float: right;
        width:auto;
        display: table-cell;
        white-space:nowrap;
    }

HTML:

    <div id="footer_menu">
        <ul>
            <li class="nav_l"><a href="#">Link</a></li>
            <li class="nav_l"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
        </ul>
    </div>

Anyone have any ideas?

Answers


Try this - DEMO

#footer_menu {
    margin: 0;
    height: 54px;
    padding: 0px;
    display: table;
    width: 100%;
}
#footer_menu  ul {
    margin: 0;
    height: 54px;
    padding: 0px;
    display: table-row;
    background: #ccc;
}
#footer_menu li {
    list-style: none;
    padding: 0px;
}
#footer_menu .nav_l {
    display: table-cell;
    white-space:nowrap;
    width:50px;
    padding:5px;
    border: 1px solid #000;
}
#footer_menu .nav_r {
    width:auto;
    display: table-cell;
    white-space:nowrap;
    padding:5px;
    border: 1px solid #c00;
}‚Äč

Need Your Help

How to access photo Gallery of mobile using j2me code

java mobile java-me photo-gallery

I am making an application in which I will change wallpaper of the mobile screen, but I have no idea how it is possible through j2me.

Android: Enable suggestions programmatically on a SearchView

android actionbarsherlock

Hello I'm using this example provided by ActionBarSherlock 4.3.1 demo. What I want to do is to set the search view in order to show suggestions only when there are 0 characters inserted and let

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.