Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/10/2014, 21:02
alanRivetta
 
Fecha de Ingreso: octubre-2014
Mensajes: 1
Antigüedad: 9 años, 6 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!