Imprimir Página - Problema con div y float

Título: Problema con div y float
Publicado por: hegispok en 2 Febrero 2016, 18:43 pm

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. ;D

Título: Re: Problema con div y float
Publicado por: WHK en 2 Febrero 2016, 19:25 pm

De verdad no entiendo que cosa quieres hacer especificamente con tu diseño, pero supongo que lo que necesitas es un <div style="clear:both"></div> para que la division flotante quede dentro del objeto padre con sus mismas medidas de altura.

Título: Re: Problema con div y float
Publicado por: IBE en 3 Febrero 2016, 00:07 am

Cita de: hegispok en 2 Febrero 2016, 18:43 pm

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>

No se si he entendido bien lo que querías plantear pero... es esto?

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:auto;
 }
 </style>

 <div id="fondo">
  <div id="abc" style="clear:both">
   <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">
   <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>

Título: Re: Problema con div y float
Publicado por: hegispok en 3 Febrero 2016, 00:41 am

Puse <div style="clear: both;"></div> al final del código y funcionó.
¡Gracias a ambos!
Saludos. ;-)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: hegispok en 2 Febrero 2016, 18:43 pm