Stop button wrapping to newline - html

Question

In design mode in VS the following code has all the buttons on a single row
HTML:
<!-- top -->
<div id="top">
<Label id="validCredentialsMessage" class="float-right" runat="server" ForeColor="Red" Text="" Visible="true"></Label>
<img src="images/logo.png" alt="" />
<div id="top-menu" class="float-right">
<ul class="main">
<li><a id="A1" href="home.aspx" runat="server" class="current"><span>Home</span></a> </li>
<li>
<span>Members</span>
<ul class="sub curved">
<li>Analysis</li>
<li>Results</li>
<li>Performance</li>
</ul>
</li>
<li><span>Blog</span> </li>
<li><span>Contact</span> </li>
<li><span>Account</span> </li>
<li><a id="iLogOut" runat="server" onserverclick ="LogOut_Click"><span>LogOut</span></a></li>
</ul>
</div>
</div>
<!-- //top -->
CSS:
/* top menu */
#top-menu {padding:19px 0 0 0;width:560px;}
#top-menu ul {list-style:none;padding:0;margin:0;}
#top-menu .main li, #top-menu .main li a, #top-menu .main li a span {display:block;float:left;cursor:pointer;}
#top-menu .main li a, #top-menu .main li a span {background:url(../images/top-menu-a.jpg) no-repeat 0 0;}
#top-menu .main li {position:relative;padding-bottom:4px;}
#top-menu.float-left .main li {padding-right:10px;}
#top-menu.float-right .main li {padding-left:10px;}
#top-menu .main li a {background-position:top left;padding:0 0 0 20px;color:#656565;}
#top-menu .main li a span {background-position:top right;height:25px;line-height:25px;text-align:center;padding:0 20px 0 0;font-family:LucidaGrandeBold, Arial, sans-serif;}
#top-menu .main li a:hover {background-position:bottom left;}
#top-menu .main li a:hover span, #top-menu .main li a.current span {background-position:bottom right;}
#top-menu .main li a:hover, #top-menu .main li a.current {color:#5790dc;background-position:bottom left;}
#top-menu .main .current-dynamic > a {color:#5790dc;background-position:bottom left;}
#top-menu .main .current-dynamic > a span {background-position:bottom right;}
#top-menu .sub {background:url(../images/top-menu-sub.jpg) repeat-x #fafafa;position:absolute;top:27px;left:10px;padding:15px 20px 10px 20px;border:1px solid #e0e0e0;min-width:110px;display:none;z-index:50;}
#top-menu.float-left .sub {left:0;}
#top-menu .sub li, #top-menu .sub li a, #top-mnu .sub li a span {display:block;float:none;background:none;padding:0;}
#top-menu.float-left .sub li, #top-menu.float-right .sub li {line-height:25px;padding:2px 0;}
#top-menu .sub li a {font-family:LucidaGrandeRegular, Arial, sans-serif;}
/* -- */
However, when running live the last button wraps even though there's enough room.
It's frustrating as the design view looks correct and only changes live which makes it difficult to track down which settings have an effect. Please can anybody advise a simple way to stop these buttons wrapping onto a new row?

Answer 1

In the first line of your css, #top-menu has a property width: 560px; which causes the buttons to wrap.
Around 605px seems to be the minimum setting here as it is the space needed by the buttons.
Check this jsFiddle.