Question

This is a problem that I run into frequently:

Given some horizontal nav links, what ways are there to ensure that the links don’t squash together such that they’ll push up or down onto two lines?

I thought that just setting a min-width for the container of those nav links would work (e.g. setting the ul or a container div of the ul to min-width:500px) but as the example shows, that isn’t enough. I feel like I’m just missing something simple, but it’s an unknown unknown.

Edit: I removed some margin on the li elements and it finally stopped wrapping to two lines. I still don’t understand why added padding was causing the wrapping as opposed to simply expanding the width of the containing elements, though.

So what techniques do you guys have for making nav links stay in a horizontal bar formation?

Here is a jsfiddle with roughly the current example that I’m working with:
http://jsfiddle.net/tchalvakspam/nE8yU/5/

Answer 1

Do you want them to be visible? One option if you don’t want them to wrap is to just have them not be shown. If you want to do that, this will work:

#admin-header {
    overflow: hidden;
    white-space: nowrap;  
}