css class no funciona con float left

[gAb1]

Hola, tengo una clase en css que muestra un fondo para mostrar el contenido dentro, se adapta el contenido que haya.

Código (css) [Seleccionar] Expandir

.boxy {
    background: none repeat scroll 0 0 #F7F7F9;
    border: 2px solid #FFFFFF;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);
    padding: 13px;
    text-shadow: 0 1px 0 #FDFDFF;
    margin: 10px;
}

Pero no funciona cuando pongo float left para un div que hay dentro:

Código (html5) [Seleccionar] Expandir

<div class="menu">
<div class="secondmenu">
<ul>
<li><a>'.$row['id'].'</a></li>
<li><a href="amigo.php?id='.$row['id'].'">'.$row['nombre'].'</a></li>
<li><a>'.$row['status'].'</a></li>
<li><a>'.$row['bonus'].'</a></li>
</ul>
</div>
</div>
';


Eso es una lista, y cada casilla debe ir de izquierda a derecha, por eso la clase secondmenu tiene float: left;

El div con la clase boxy envuelve todo el codigo php, pero no creo que eso sea un problema, ya que si quito el float left el fondo se alarga y cubre todas las filas de la lista, que estan todas de arriba a abajo.

¿Sabeis alguna manera de arreglar esto?

Gracias.

[#!drvy]

Asegúrate de que limpias el float después de usarlo.

Código (css) [Seleccionar] Expandir

.clear {clear:both;}

Código (html4strict) [Seleccionar] Expandir

<div class="menu">
   <div class="sencondmenu">
      ..
      ..
   </div>
   <div class="clear"></div>
</div>

Saludos

[gAb1]

Gracias! Si que funciona, pero poniendolo fuera del while para que no haga un espacio entre filas.

Otra duda, para cambiar el tamaño del primer y ultimo <li> uso:

Código (css) [Seleccionar] Expandir

.menu li:first-child > a {width: 8%;}
.menu li:last-child > a {width: 16%;}

¿Pero para cambiar los otros? Necesito ajustar el ancho para el contenido que va a tener cada uno.

Gracias.

Edito: dejare de anidar en css y creare clases para cada <li>