Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] mantener el tamaño de una capa al flotar sus capas interiores

Estas en el tema de mantener el tamaño de una capa al flotar sus capas interiores en el foro de CSS en Foros del Web. Hola tengo una consulta de concepto sobre la propiedad float que me surge un problema y no se a que es debido, si tengo una ...
  #1 (permalink)  
Antiguo 13/09/2013, 06:56
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 11 años, 3 meses
Puntos: 5
mantener el tamaño de una capa al flotar sus capas interiores

Hola tengo una consulta de concepto sobre la propiedad float que me surge un problema y no se a que es debido, si tengo una caja por ejemplo de 100% de ancho y un alto de 50px y dentro quiero colocar tres cajas que floten a la izquierda quedando en linea por ejemplo que cada caja mida 33% de ancho y un alto de 20px.

hasta aqui bien pero el problema que tengo es que quiero mantener el alto de la caja principal osea los 50px, es decir que si la caja principal es roja como color de fondo se tiene que seguir biendo pero no es asin como lo podria conseguir yo hice algo asin:


Código HTML:
Ver original
  1. <div id="caja-principal">
  2.     <div id="uno"></div>
  3.     <div id="dos"></div>
  4.     <div id="tres"></div>
  5. </div>
esto el css
Código CSS:
Ver original
  1. <style>    
  2. #principal{
  3.    width:100%;
  4.    background-color:yellow;
  5. }
  6. #principal div{
  7.     float:left;
  8. }
  9. #uno{
  10.     width:33%;
  11.     height:30px;
  12.     background-color:blue;
  13.     margin:10px;
  14. }
  15. #dos{
  16.     width:33%;
  17.     height:30px;
  18.     background-color:green;
  19.     margin:10px;
  20. }
  21. #tres{
  22.     width:33%;
  23.     height:30px;
  24.     background-color:black;
  25.     margin:10px;
  26. }
  27. </style>
no lo probe pero como ejemplo vale, el div principal quiero que se vea su color amarillo que tendria que verse alrededor ya que los otros div hijos de este le di un margen de 10 px pero no se ve alguna idea para solucionar esto? y por que pasa?

modifico para comentar que lo que no quiero es darle una altura fija a la caja principal si no que esta tenga la altura dependiendo de su interior.

Saludos.

Última edición por roboty; 13/09/2013 a las 07:17
  #2 (permalink)  
Antiguo 13/09/2013, 09:34
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: mantener el tamaño de una capa al flotar sus capas interiores

La solución más usada suele ser aplicándole al contenedor:

Código CSS:
Ver original
  1. overflow: hidden;

Luego hay otras técnicas más robustas, como micro clearfix.
  #3 (permalink)  
Antiguo 13/09/2013, 11:02
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 11 años, 3 meses
Puntos: 5
Respuesta: mantener el tamaño de una capa al flotar sus capas interiores

gracias pzin pude arreglarlo con overflow:hidden, gracias.

Etiquetas: ancho, background, capas, color, tamaño
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 03:54.