Foros del Web » Creando para Internet » CSS »

Problema div Float y height

Estas en el tema de Problema div Float y height en el foro de CSS en Foros del Web. Buenas noches a todos, como les va? Soy nuevo el foro, y tengo una duda para commpartir. Este tema lo he leido en algunos lugares ...
  #1 (permalink)  
Antiguo 14/10/2014, 21:02
 
Fecha de Ingreso: octubre-2014
Mensajes: 1
Antigüedad: 9 años, 5 meses
Puntos: 0
Problema div Float y height

Buenas noches a todos, como les va?
Soy nuevo el foro, y tengo una duda para commpartir.
Este tema lo he leido en algunos lugares y no he podido aplicar el resultado deseado en mi proyecto.
El caso es qe tengo un div #contenedor con 5 div's flotando de la misma anchura.
Mi idea es que los 3 divs centrales puedan ser encuadrados y los dos laterales tengan la altura que logro el formado #bloqueCentral.


Este es mi codigo :


Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />

<title>Como hago?</title>
<style type="text/css">

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.col 
{
  float: left;
  border: 1px solid red;
  width: 19.8%;
}
#centro {
  border:1px solid green;
}

</style>
</head>
    <body>
      <div id="contenedor">
        
        <div class="col">1</div>
          <div id="bloqueCentral">
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
          </div>
        <div class="col">5</div>

       </div>
      <div class="clear"></div>
</body>
</html>

Sè que tiene que ver con la propiedad Float, pero veo que el div #bloqueCentral no toma la altura y anchura correspondiente a los 3 div's envolvidos sino que toma todo el ancho del contenedor (sumados los 2 div's laterales) y un height de 0..

Que debo hacer?


Agradezco su ayuda y espero haberme expresado bien

Hasta luego!
  #2 (permalink)  
Antiguo 15/10/2014, 02:31
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 12 años, 9 meses
Puntos: 14
Respuesta: Problema div Float y height

Tienes algún problema en tu css.
Lo primero, si envelves 3 col en un bloque, y esos col tienen un 19% de ancho cada uno, solo te van a ocupar una parte del bloque central, que es su contenedor.

Solución:
Tienes que crear tres columnas principales, las dos laterales y la central. Eso lo puedes hacer con este código
Código CSS:
Ver original
  1. .col
  2. {
  3.   float: left;
  4.   border: 1px solid red;
  5.   width: 19.8%;
  6.   background: #ff0000;
  7. }
  8.  
  9. #bloqueCentral{
  10.     border: 1px solid #000;
  11.     width: 59.4%;
  12.     height: auto;
  13.     float: left;
  14. }

Ahora tendrás dos columnas laterales con la clase col, y una central con el id bloqueCentral, que ya te cubrirán toda la pantalla.

Ahora crea una clase que te para cada #bloqueCentral en tres partes

Código CSS:
Ver original
  1. .col_central
  2. {
  3.   float: left;
  4.   border: 1px solid red;
  5.   width: 33.1%;
  6.   background: #0000ff;
  7. }

Crea el html para las columnas
Código HTML:
Ver original
  1. <div class="col">1</div>
  2. <div id="bloqueCentral">
  3.     <div class="col">2</div>
  4.     <div class="col">3</div>
  5.     <div class="col">4</div>
  6. </div>
  7. <div class="col">5</div>

Y ahora comprueba que funcione ;) y si tienes cualquier duda pásate por aquí
Un saludo
  #3 (permalink)  
Antiguo 15/10/2014, 19:06
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Problema div Float y height

1. Tu div central se llama #bloqueCentral y en tu css lo llamas #centro, Corrige eso.
2. El elemento padre no va tomar la altura de los hijos flotados, solución: le agregas un div clear dentro del #bloqueCentral o mas fácil (si el diseño lo permite) le agregas un overflow:hidden para que detecte automáticamente la altura de sus 3 hijos.
__________________
velarde23.com - Soluciones Web

Última edición por siddartha23; 16/10/2014 a las 18:05

Etiquetas: altura, maquetacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:18.