[SOLUCIONADO] Problema con div y float

hegispok · #1 (**permalink**) 02/02/2016, 10:56

Buenas, soy nuevo por aquí y por el diseño de webs, tengo un pequeño problema y no encuentro la manera de solucionarlo, lo mas probable es que sea una tontería de nada

Pongo el código y ahora me explico:

Código:

<html>

 <style>
 img{
 widht:100px;
 height:100px;
 }
 div#fondo{
  margin:auto;
  margin-top:5px;
  width:465px;
  height:auto;
  background-color:yellow;
 }
 div#abc{
  margin-left:10px;
  float:null;
 }
 </style>

 <div id="fondo">
  <div id="abc">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
  </div>
 </div>

</html>

La cosa es que todo sale bien, las imágenes pequeñitas, en fila y columnas y el fondo amarillo, pero el problema viene cuando quiero cambiar el valor de "float:null;" a "float:left;", al hacer esto, el fondo amarillo desaparece por completo, y necesito que esté en left y se vea el fondo amarillo, para otro código diferente a este.

PD: Poniendo el "height" del "div#fondo" en cualquier numero se ve, pero necesito que sea "auto", ya que a veces habrá mas imágenes y otras veces habrá menos.

Espero que me podáis ayudar.
Saludos.

mbm150 · #2 (**permalink**) 02/02/2016, 14:24

Hola

tengo dos soluciones, en tu caso creo que te valen las dos. La primera es añadirle overflow: hidden; a #fondo.

Código CSS:

Ver originaldiv#fondo{
   overflow: hidden;
  margin:auto;
  margin-top:5px;
  width:465px;
  height:auto;
  background-color:yellow;
 }

y la segunda es añadir otro elemento dentro de fondo.

Código HTML:

Ver original<div id="fondo">
  <div id="abc">
   <img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
   etc.
  </div>
<div style="clear: both;"></div>
 </div>

Depende de lo que quieras hacer puede ser mas util uno que el otro.

Saludos.

hegispok · #3 (**permalink**) 02/02/2016, 17:39

Cita:

Iniciado por mbm150