Problema con div y float

Iniciado por hegispok, 2 Febrero 2016, 18:43 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

hegispok

2 Febrero 2016, 18:43 PM Ultima modificación: 2 Febrero 2016, 19:14 PM por hegispok
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 [Seleccionar]
<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

WHK

#1
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.

IBE

#2
3 Febrero 2016, 00:07 AM
Cita de: 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 [Seleccionar]
<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
No se si he entendido bien lo que querías plantear pero... es esto?
Código [Seleccionar]

<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>

hegispok

#3
3 Febrero 2016, 00:41 AM Ultima modificación: 3 Febrero 2016, 00:44 AM por hegispok
Puse <div style="clear: both;"></div> al final del código y funcionó.
¡Gracias a ambos!
Saludos.  ;-)
Imprimir
Ir Arriba Páginas1
Acciones del Usuario