Question

I have designed a responsive layout that you can see here: http://pixelcakecreative.com/cimlife/responsive/

When viewed on a display that is less that 1550px wide, there is a small problem. I want that nav bar to fill up the entire width of the <nav> element.

My HTML is set up like this:

<nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contests</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>

In my css, I have given each <a> some padding. The padding is the variable that should change based on the page width, so using px will not work. I cant use percentages because each <li> has a different width (different amount of text). Is there a good solution (jquery or css) to spread out the navbar across the entire width of the <nav>?

The attached picture is the desired effect

Answer 1

How about

nav ul {
    width: 100%;
    display: table;
}

nav ul li {
    float:none;
    display: table-cell;
}

This solution will let the browser lay stuff out as it sees fit – wider lis will be given more width that narrower ones.