Responsive navigation — from one line to 3-fluid-columns?


When using a standard <nav> & <ul> it is easy to create navigation that appears on a single line:

enter image description here


Since this is for a responsive layout, on smaller displays, the navigation will contract into 3-columns (and maybe even 2) with media queries (not featured in code):

enter image description here


But it's not spaced aesthetically:

Since the widths of the nav li elements are 33.3333% then the spacing is messed up — some navigation items are long, and some short. But the spacing isn't fluid.

How can I adjust each column to be only as wide as the widest element + padding/margins? That is, without separating or nesting the ul out — which would break the semantics, and when viewed on a wide display.

Here's the simple HTML:

    <li>Very Long Link</li>
    <li>Also Long Link</li>

And here's the relevant CSS:

nav {
    clear: both;
    background: pink;

    nav ul {
        padding: 20px 10px 0 30px;
        margin: 0;
        overflow: hidden;
        font-size: 16px;

    nav li {
        font-variant: small-caps;
        text-decoration: underline;
        list-style: none;
        display: block;
        float: left;
        padding: 0 0 30px 0;
        margin: 0; 
        width: 33.33333%;
        float: left;

Curious to hear your ideas. Thank you in advance!

P.S. I would like to stress cross-browser compatibility and semantics.

Problem courtesy of: Baumr


Add some @media queries for mobile.
You'll need to open/contract the center bar to see the change

@media only screen and (max-width: 480px) {
    nav li { max-width:160px; text-align:center } /* This would only allow 3 to fit */

@media only screen and (max-width: 320px) {
    nav li { max-width:106px; text-align:center }

Betting the font size will be a factor at 320px wide (FYI). Your problem reminds me of a book I read recently: "Mobile First". In a nutshell: start your build at mobile, and work 'up' from there. Def worth checking out.

Solution courtesy of: Dawson


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.