Question

I have a menu at:

http://www.spotlesswebdesign.com/dqhendricks/index.html

The problem is, when you resize the window small enough, the menu will start wrapping to a second line. I would like to prevent this from happening, and in the past I have use very similar css without getting this problem. How can I stop it from wrapping?

Here is some code:

HTML

    <div id="nav">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Experiments</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>

CSS

#nav {
    margin: 0 25px;
}

#nav .left {
    float: left;
    width: 9px;
    height: 38px;
    background-image: url('../images/nav/left.png');
}

#nav .right {
    float: right;
    width: 9px;
    height: 38px;
    background-image: url('../images/nav/right.png');
}

#nav .center {
    height: 38px;
    margin: 0 9px;
    background: url('../images/nav/center.png') repeat-x;
}

#nav ul {
    width: 1000px;
    height: 38px;
    margin: auto;
    padding-left: 2px;
    list-style-type: none;
    background: url('../images/nav/divider.png') top left no-repeat;
}

#nav li {
    display: inline;
}

#nav a {
    display: block;
    float: left;
    padding: 0 30px 0 28px;
    height: 38px;
    line-height: 36px;
    text-decoration: none;
    color: #777777;
    background: url('../images/nav/divider.png') top right no-repeat;
}

Answer 1

Use min-width to allow it to grow with the page instead of being fixed width. Should work in IE8 and all other browsers. IE6 can go burn.