eso pasa porque los elementos de la lista los estas poniendo flotantes, al hacer eso se separan del flujo natural de html (estático) y por lo tanto los elmentos que estan por debajo de la lista continuan con el flujo normal haciendo que la lista flote como bien lo has esppecificado en el CSS.
La solución mas elegante es usar un "clearfix" en la el contenedor de la lista:
Código:
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
de esta manera el contenedor de la lista se ajustará al tamaño de la lista flotante.
saludos