Grow your CSS skills. Land your dream job.

Flexible horizontal navigation with equal distance between nav elements

  • # January 3, 2012 at 7:20 am

    This is is my problem:
    – I need to make a horizontal menu
    – It needs to be flexible so no set width
    – The frist and the last element have to be align to the very beginning and end of the nav
    – The nav element can be different width
    – The gap between the elements have to be equal (except no gap before the first element and no gap after the last )

    My current solution is like this (see it in action here http://jsfiddle.net/wKjVq/):

    ul{
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    width: 100%;
    }

    .empty {
    -webkit-box-flex: 1;
    }

    • Element 1


    • El 2


    • Element three


    • Element 4

    By using box flex the empty list elements makes even gaps between the “real” nav elements.
    I’m happy with the outcome of this solution but not really happy with using empty divs.

    So my first questions is: Am I missing something totally obvious?
    My 2nd question is: Do anyone else have any other solution (preferably in css 2 but css3 is fine as long as there is a nice fallback)?

    # January 3, 2012 at 7:42 am

    There is no way (to my knowledge) to do this with pure CSS without setting specific %age widths to your li elements and respective margins.

    Javascript to do some calculations summing the width of the li elements and then dividing appropriately to set margins would seem to be the answer but I have no skills in that area.

    Frankly I think you’re putting an awful lot of stress on EXACT requirements that the viewer probably won’t event notice.

    # January 3, 2012 at 10:37 am

    Thanks Paulie_D. Yes javascript would be an option and not too difficult to implement. But I try not to use javascript for responsiveness and flexibility.

    It’s the “awful lot of stress on EXACT requirements” that makes this to a challenge isn’t it? And challenges are fun!

    (Also, in this particular case the exact requirements makes the website looks so much better.)

    # January 4, 2012 at 7:06 am

    Also posted this on stack overflow and got a solution

    # January 4, 2012 at 7:42 am

    Nice solution but you’ll need a fallback for non-webkit broswers.

    # January 4, 2012 at 7:54 am

    Yes you’re right Paulie_D but there’s a comment to the answer that links to cross-browser safe solution.

    # January 4, 2012 at 8:10 am

    i quickly through this together. Not exactly what you may be looking for, but same idea and browser friendly.


    • Element 1

    • El 2

    • Element three

    • Element 4

    ul{
    max-width: 100%;
    }

    li{
    float:left;
    }

    li.first-li{
    text-align: left;
    margin-right: 2%;
    width: 23%;
    background-color:red;
    }

    li.middle-li{
    text-align: center;
    margin: 0 2%;
    width: 21%;
    background-color:green;
    }

    li.last-li{
    text-align:right;
    margin-left: 2%;
    width: 23%;
    background-color:blue;
    }
    # January 4, 2012 at 8:39 am

    Thanks springlab. It’s almost a good solution but the gaps between the actual words are different. In this case especially the gap between the first and the second element is much larger than the others as you can see here http://jsfiddle.net/3R7GU/1/

    # January 4, 2012 at 9:37 am

    @ erikportin “Yes you’re right Paulie_D but there’s a comment to the answer that links to cross-browser safe solution.”

    Which leads me back to….”I think you’re putting an awful lot of stress on EXACT requirements that the viewer probably won’t event notice.” since you’re happy to fallback for non-webkit browser.

    Not that I don’t love the idea…just it’s a lot of hassle for very little gain…but then ‘each to their own’. :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".