When I apply the float:left style to my <ul>, why does the nav bar appear very large?
Consider this example:
<ul class="nav" id="ModuleContainer" runat="server" style="float:left">
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
</ul>
http://jsfiddle.net/65qggwch/1/
Without the float, the nav bar hides the elements that exceed the display screen (which is the desired result):
<ul class="nav" id="ModuleContainer" runat="server" style="float:none">
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
<li>111111----------------------</li>
</ul>
The only issue is that without float:left, the elements appear on two lines instead of one as shown in the second example.