[SOLUCIONADO] No se ve caja contenedora

Iballa · #1 (**permalink**) 02/06/2013, 11:22

Hola, me gustaria saber por qué no se me ve el fondo de color rojo, que contiene
a las tres cajas A, B y C. Le he dado anchura y color, pero no se ve la caja contenedora .contenedor. ¿Alguien sabe cómo puedo hacer que se vea detrás?

Gracias¡

Código HTML:

Ver original<!DOCTYPE HTML>
 
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="pruebacss.css"/>
  
</head>
<body>
      <div class="contenedor">
         <div class="cajasFloat">AAAAAAA</div>
         <div class="cajasFloat">BBBBBBB</div>
         <div class="cajasFloat">CCCCCCC</div>
         
 
      </div>
</body>
</html>

Código CSS:

Ver original.contenedor {
    background-color: red;
    width: 900px;
 
}
 
.cajasf {
   float: left;
   width: 200px;
   margin: 5px 10px;
   background-color: pink;
   text-align: center;
   color: black;
   
}

pzin · #2 (**permalink**) 02/06/2013, 11:29

Porque al tener sólo elementos flotados el contenedor no crecerá en altura.

Lo más simple sería hacer:

Código CSS:

Ver original.contenedor {
  overflow: hidden;
}

Y así forzarás a que tome la altura correcta.

hackjose · #3 (**permalink**) 02/06/2013, 11:31

.cajasf no existe, por eso
Saludos

C2am · #4 (**permalink**) 03/06/2013, 22:47

En realidad tienes razón hackjose en cuanto a que no existe una clase cajasf, pero al no existir, o mejor dicho al no aplicarse la clase "cajasFloat" no debería tener problemas, ya que el fondo se vería.
El problema, tal como dice pzin es que falta limpiar los float.

Saludos

Iballa · #5 (**permalink**) 04/06/2013, 02:22

Cita:

Iniciado por pzin

Porque al tener sólo elementos flotados el contenedor no crecerá en altura.

Lo más simple sería hacer:

Código CSS:

Ver original.contenedor {
  overflow: hidden;
}

Y así forzarás a que tome la altura correcta.

Gracias pzin.

hackjose, en realidad fue un error al copiar aqui.

Saludos¡¡

Iballa · #6 (**permalink**) 04/06/2013, 02:28

Cita:
Iniciado por pzin
Porque al tener sólo elementos flotados el contenedor no crecerá en altura.

Lo más simple sería hacer:
Código CSS:
Ver original
.contenedor {
overflow: hidden;
}

Y así forzarás a que tome la altura correcta.
Gracias pzin y C2am

hackjose, en realidad fue un error al copiar aqui.

Saludos¡¡