Why is this menu wrapping?

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 simi开发者_运维知识库lar 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;
}

---

This is a working example I just tested out.

Add white-space: nowrap; to #nav .center and add display: inline-block; to #nav li.

Those two will prevent the contents of the navigation from wrapping and creating a new line.

---

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.

---

Add:

overflow: visible

to #nav

---

Set the size of the wrapping DIV:

#nav {
    margin: 0 25px;
    width: 1000px;
}