Hola, tengo una clase en css que muestra un fondo para mostrar el contenido dentro, se adapta el contenido que haya.
.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:
<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.
Asegúrate de que limpias el float después de usarlo.
.clear {clear:both;}
<div class="menu">
<div class="sencondmenu">
..
..
</div>
<div class="clear"></div>
</div>
Saludos
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:
.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> :)