Problema div Float y height

alanRivetta · #1 (**permalink**) 14/10/2014, 21:02

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!

javierflti · #2 (**permalink**) 15/10/2014, 02:31

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.col
{
  float: left;
  border: 1px solid red;
  width: 19.8%;
  background: #ff0000;
}
 
#bloqueCentral{
    border: 1px solid #000;
    width: 59.4%;
    height: auto;
    float: left;
}

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.col_central
{
  float: left;
  border: 1px solid red;
  width: 33.1%;
  background: #0000ff;
}

Crea el html para las columnas

Código HTML:

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

Y ahora comprueba que funcione ;) y si tienes cualquier duda pásate por aquí
Un saludo

siddartha23 · #3 (**permalink**) 15/10/2014, 19:06

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.