resizing issue

[orchida3]

I have a menu across the top of my page. I have the menu marked up with a <ul>. My problem occurs when the browser window is reized(the width of the screen is made shorter). The menu items will start to move on top of each other as the screen gets smaller. I need the menu items to stay aligned horizontally even when the screen gets smaller. Any ideas on how to achieve this behavior?

I have:

<div id="nav">
<ul id="nav_ul">
<li><a href="/"><img src="aaa.gif"></a></li>
<li><a href="/"><img src="bbb.gif"></a></li>
<li><a href="/"><img src="ccc.gif"></a></li>
<li><a href="/"><img src="ddd.gif"></a></li>
<li><a href="/"><img src="eee.gif"></a></li>
</ul>
</div>

#nav
{
float: left;
width: 891;
background-color: #CCCCCC;
border: 1px solid #FFFFFF;
padding: 8px 0 8px 0;

}

#nav_ul
{
float: left;
margin: 0;
padding: 0;
list-style: none;
}

#nav_ul li
{
float:left;
margin:0;
padding:0 5px 0 0;
}

#nav a
{
display:block;
}

[Setek]

#nav
{
float: left;
width: 891;
background-color: #CCCCCC;
border: 1px solid #FFFFFF;
padding: 8px 0 8px 0;

}

At the moment your css has an error in it:

width: 891;

You have to define what unit type values are - px, em, etc - so it would have to be

width: 891px;

That will set your div's width to a set size, and when the browser resizes smaller than 891px of the viewport + whatever other things you have to the side of it, it will put a horizontal scrollbar in place.

[orchida3]

ahhh...indeed...it's always something tiny that gets missed. Thanks