updated: April 9th, 2007 / Ross Johnson / 8 Comments

Justified horizontal navigation with liquid layouts

The use of horizontal navigation on web sites has been around for ages, and with the extremely vast differences between browsing resolutions the need to have a site that is liquid is becoming increasingly more important. This presents a problem however, for us standards based coders when we try and combine the two practices.

How do we ensure that our horizontal navigation fits with in our liquid design beyond simply centering it?

Searching the internet I was never able to find a solution, until one day it struck me. So simple, yet I had yet to see it?

Start with foundation

Like any navigation, we will start with a list – after all, navigation is simply a list of pages that you can browse through.

Do it horizontal style!

Dirty headlines aside, a little bit of CSS and we can turn this list into a horizontal navigation!

The Easy Effective Touch

This will leave us with a horizontal navigation, and many people will now space out each individual list item with padding and margins and then maybe center align the whole thing. However as the design stretches away from the optimal browser width the navigation looks more and more out of place.

So what we do is count up the amount of items in our navigation, divide 100% by that number and set the width of each LI element to the number we end up with. In this case we have 5 elements, 100/5 = 20. So our code would be then be the following:

Finishing Touches

This will center all the navigational elements equally across the page regardless of browser window width. However many times we want the navigation to line up on the left or right edge (or both!). In which case we can simply assign a class to first or last list item to change the text alignment to left/right.

Examples in motion

This can be done with image replacement as well, and my example of this process is a site I recently worked on redoing (still improving, short deadline!) called Plymouth Green Crossings. Provided you are not on IE6 you can see that all the items stay spaced out properly regardless of window size with out the use of javascript! Voila!

NOTE: In some cases IE6 required a slightly smaller li for one item (19% for the last container for example) or it would drop it to the next line. Maybe related to the 3 pixel jog?

8 thoughts Justified horizontal navigation with liquid layouts

  1. Hiya,

    what a fantastic solution. You said it yourself, very simple (but so effective). I’ve followed your article locally, the test page has just been securely locked away, haha.

    Keep it up!

  2. Thanks Thorsten!

    It truly is one of those “I can’t believe I never thought of this before!” type of moments.

    Previously I was doing all sorts of custom resolution dependent style sheets and javascript and even then it had gaps where navigation looked funny.

  3. Hey Ross,

    there’s one “quirk” left that just crept up, maybe you can help me out?

    I usually set hyperlinks in such navigations to “display: block;” so they fill up the list elements nicely (makes for nice hover effects with switched background colors), but somehow it doesn’t work today. The hyperlinks fill the list elements, but to get the hover effect I specifically need to hover over the text instead of just hovering over the list element.

    Have you encountered this in the past, too? Any hint appreciated!

  4. By the way,

    I use Firebug for debugging and Firefox for development.

  5. Do you have a link? My initial gut reaction is that while the link is block level it might only expand as far as the text itself because there is no width set. Try setting the width to the same percentage of your LI elements, ex: 20%?

  6. Oh,

    I found the problem.. I had forgotten to set “display: block;” on “a”, but had it set on “a:hover”.

    No need to set a width on the links for Firefox, Opera and IE7, BUT for IE6-. That would be “width: 100%;” by the way, because the links are contained in a parent element 🙂


    Thanks for the hint though, it set me off into the right direction!

  7. Ahh good catch, I wasn’t thinking.

    I find most of the time when something isn’t behaving right I go straight to the developer bar and turn on “outline” current element. Makes it easy to see if an element is expanding on hover, or only the text itself vs a block level.

    Test pages looks and works great!

  8. Thank you for all your help! I have one question. I am trying to make a nav bar that stretches horizontally and has a border around each table entry, is there ANY way to pull this off without the table wrapping back around to the next line? ex: http://www.samswitzer.org/web/nod/

Comments are closed.