Envoltorio de height variable no ¿responde?

ramiromd · #1 (**permalink**) 11/06/2011, 17:53

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 originalbody{ background-color: #232121;}
 
#wraper{
    width: 800px;
    background-color: white;
    border-radius: 15px;
    -moz-border-radius: 15px;
    margin: auto;
}
 
#header{
    width: 100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -moz-border-radius: 15px 15px 0px 0px;
}
 
#headerLogo{
    background-color: white;
    width: 50%;
    float: left;
    border-top-left-radius: 15px;
    -moz-border-radius: 15px 0px 0px 0px;
}
 
#headerUser{
    background-color: white;
    width: 50%;
    float: right;
    border-top-right-radius: 15px;
    -moz-border-radius: 0px 15px 0px 0px;
}
 
#content{
    width: 79%;
    float: right;
    border: 1px solid blue;
}
 
#menu{
    width: 20%;
    float: left;
    border: 1px solid red;
}

El html afectado:

Código HTML:

Ver original<body>
    <div id="wraper">
        <div id="header">
            <div id="headerLogo">Logo</div>
            <div id="headerUser">User</div>
        </div>
        <div id="menu"><p>Menu</p></div>
        <div id="content"><p>Contenido</p></div>
    </div>
</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.

Naahuel · #2 (**permalink**) 11/06/2011, 18:06

Tanto al #header como al #wrapper debes agregarles la clase clear. Luego agregá esto a tu css:

Código CSS:

Ver original.clear{zoom:1}
.clear:after{
    content:'.';
    display:block;
    clear:both;
    height:0;
    line-height:0;
    visibility:hidden;
}

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

tredio · #3 (**permalink**) 11/06/2011, 18:15

agrega

Código CSS:

Ver originaloverflow:hidden

a tu regla #wraper, quedandote algo asi:

Código CSS:

Ver original#wraper{
    width: 800px;
    background-color: white;
    border-radius: 15px;
    -moz-border-radius: 15px;
    margin: auto;
    overflow:hidden;
}

ramiromd · #4 (**permalink**) 11/06/2011, 18:53

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