Foros del Web » Creando para Internet » CSS »

Envoltorio de height variable no ¿responde?

Estas en el tema de Envoltorio de height variable no ¿responde? en el foro de CSS en Foros del Web. Buenas, estoy haciendo una maquetacion algo simple: un envoltorio, un header, un main, un menu, y un pie. El problema es que cuando aplico el ...
  #1 (permalink)  
Antiguo 11/06/2011, 17:53
 
Fecha de Ingreso: agosto-2010
Mensajes: 100
Antigüedad: 6 años, 10 meses
Puntos: 2
Envoltorio de height variable no ¿responde?

Buenas, estoy haciendo una maquetacion algo simple: un envoltorio, un header, un main, un menu, y un pie.
El problema es que cuando aplico el header, el alto del envoltorio se modifica correctamente, ahora cuando aplico el main y menu no.
Acá dejo una imagen:

El css:

Código CSS:
Ver original
  1. body{ background-color: #232121;}
  2.  
  3. #wraper{
  4.     width: 800px;
  5.     background-color: white;
  6.     border-radius: 15px;
  7.     -moz-border-radius: 15px;
  8.     margin: auto;
  9. }
  10.  
  11. #header{
  12.     width: 100%;
  13.     background-color: white;
  14.     border-top-left-radius: 15px;
  15.     border-top-right-radius: 15px;
  16.     -moz-border-radius: 15px 15px 0px 0px;
  17. }
  18.  
  19. #headerLogo{
  20.     background-color: white;
  21.     width: 50%;
  22.     float: left;
  23.     border-top-left-radius: 15px;
  24.     -moz-border-radius: 15px 0px 0px 0px;
  25. }
  26.  
  27. #headerUser{
  28.     background-color: white;
  29.     width: 50%;
  30.     float: right;
  31.     border-top-right-radius: 15px;
  32.     -moz-border-radius: 0px 15px 0px 0px;
  33. }
  34.  
  35. #content{
  36.     width: 79%;
  37.     float: right;
  38.     border: 1px solid blue;
  39. }
  40.  
  41. #menu{
  42.     width: 20%;
  43.     float: left;
  44.     border: 1px solid red;
  45. }

El html afectado:

Código HTML:
Ver original
  1.     <div id="wraper">
  2.         <div id="header">
  3.             <div id="headerLogo">Logo</div>
  4.             <div id="headerUser">User</div>
  5.         </div>
  6.         <div id="menu"><p>Menu</p></div>
  7.         <div id="content"><p>Contenido</p></div>
  8.     </div>
  9. </body>

Por qué el wraper no se expande a la altura de menu y content ??.
Agradecería cualquier tipo de pista. Un saludo y gracias.
  #2 (permalink)  
Antiguo 11/06/2011, 18:06
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 4 meses
Puntos: 192
Respuesta: Envoltorio de height variable no ¿responde?

Tanto al #header como al #wrapper debes agregarles la clase clear. Luego agregá esto a tu css:
Código CSS:
Ver original
  1. .clear{zoom:1}
  2. .clear:after{
  3.     content:'.';
  4.     display:block;
  5.     clear:both;
  6.     height:0;
  7.     line-height:0;
  8.     visibility:hidden;
  9. }

Tenés que "limpiar" los flotados. La clase clear se la agregarás a todo elemento que contenga elementos flotados en su interior.

Podés leer acá algunos otros consejos y experiecias personales con el flotado. Tu problema está en el punto 2
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 11/06/2011, 18:15
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 8 meses
Puntos: 66
Respuesta: Envoltorio de height variable no ¿responde?

agrega

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

a tu regla #wraper, quedandote algo asi:

Código CSS:
Ver original
  1. #wraper{
  2.     width: 800px;
  3.     background-color: white;
  4.     border-radius: 15px;
  5.     -moz-border-radius: 15px;
  6.     margin: auto;
  7.     overflow:hidden;
  8. }
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #4 (permalink)  
Antiguo 11/06/2011, 18:53
 
Fecha de Ingreso: agosto-2010
Mensajes: 100
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Envoltorio de height variable no ¿responde?

Gracias por las respuesta. apliqué la solución de tredio y me ha servido.

Etiquetas: height, responde, variables
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 20:36.