Vertical list get out of line when the window size changes

Question

It's kinda hard for me to explain the problem, so let me give you the URL.

Visit http://www.ucaftercruz.com

If you look at the footer, theres an unordered list aligned vertically. When you drag the browser and make it smaller, the list goes from one line to two lines. How do I make it so that it stays in one line and in the center of the footer regardless of window size?

I suspect it has something to do with my divs.

Here is my html code:

<div style="clear:both;">
   <div id="footer">
    <div id="footer-pages">
        <ul>
            <li><a href="http://www.ucaftercruz.com/about/">About the blog</a></li><span>&#149;</span>
            <li><a href="http://www.ucaftercruz.com/blographies/">The Authors</a></li><span>&#149;</span>
            <li><a href="#">Archives</a></li><span>&#149;</span>
            <li><a href="http://www.ucaftercruz.com/credits/">Credits</a></li><span>&#149;</span>
            <li><a href="http://www.ucaftercruz.com/faq/">FAQ</a></li>
        </ul>
    </div>

And here is my CSS:

#footer {
    height: 100px;
    background-color: #d0cabc;
    font-size: 12px;
}

#footer a {
    color: #606060;
}

#footer-pages {
    padding: 20px 0;
    border: 0px solid green;
    margin: 0 auto;
    width: 35%;
}

#footer li {
    display: inline-block;
    margin: 0 15px;
}

Answer 1

In order to make it so that the menu can be dynamically added to, you should make the container width (#footer-pages) to be a fairly wide div, and center the contents. I used the following code via the inspector:

#footer-pages {
  width: 100%;
  text-align: center;
  min-width: 500px;
}

Answer 2

add #footer { white-space: nowrap } to your css for footer. You could also add min-width:###px where ### is big enough.

In the first case, you tell the rendering engine to avoid making the box any smaller than the minimum required to contain the text. I actually don't know for sure if this will work on this kind of list.

In the second case, which I know works, but is a little less elegant, will force the engine to keep the layout box no smaller than a specific amount -- if you choose an amount that will contain the text, it may add scrollbars (which you can control with the overflow property) but not cause the text to wrap.