[SOLUCIONADO] Contenedor rebasado html + css

bandolera · 13/06/2013, 11:17

Tengo un código simple, que es el siguiente:

Index.html

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="maqueta_estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
        <div id="contenedor">
                <div id="cabecera">Esta es la cabecera</div>
                <div id="barra-lateral">Esta es la barra lateral</div>
                <div id="contenido">Este es el contenido principal</div>
                <div id="pie">Este es el pie de pagina</div>
       </div>
</body>
</html>

Y la hoja de estilos:

Código HTML:

#contenedor {
       width: 900px;
       height: 400px;
       background-color: #DCFAF4;
}
#cabecera {
       background-color: green;
       height:50px;
       padding:5px;
}
#barra-lateral {
            background-color: orange;
            float: left;
            width:140px;
            height:100%;
        }
#contenido {
            background-color: gray;
            float:left;
            width:740px;
            height:100%;
        }
#pie {
            background-color: blue;
            clear: both;
        }

La sección #barra-lateral y #contenido tienen 100% de alto, sin embargo superan el alto del contenedor. Por qué? No deberían limitarse? Cuál es el error? o en todo caso, cómo puedo hacer que se quede dentro?

Gracias.

tonigomila1988 · 13/06/2013, 11:30

Hola bandolera:

El error es que al poner en los estilos de barra-lateral y contenido height: 100%, el navegador lo interpreta como el 100% del height del contenedor.

Por lo tanto, siempre cojeran el valor de height de tu contenedor, en este caso 400px.

Para que no pase los limites, tienes que indicar a todas las capas dentro del contenedor, un height en % teniendo en cuenta que el 100% son 400px.

Un ejemplo sería:
- cabecera height :10%
- barra lateral y contenido height: 85%
- pie height: 5%

Saludos.

bandolera · 14/06/2013, 11:23

Cita:

Iniciado por tonigomila1988

Hola bandolera:

El error es que al poner en los estilos de barra-lateral y contenido height: 100%, el navegador lo interpreta como el 100% del height del contenedor.

Por lo tanto, siempre cojeran el valor de height de tu contenedor, en este caso 400px.

Para que no pase los limites, tienes que indicar a todas las capas dentro del contenedor, un height en % teniendo en cuenta que el 100% son 400px.

Un ejemplo sería:
- cabecera height :10%
- barra lateral y contenido height: 85%
- pie height: 5%

Saludos.

Voy a poner todo en %.
Y si quiero que el alto del contenedor (div) se ajuste al contenido, será suficiente con ponerle % también?

Rafael · 14/06/2013, 11:27

Independientemente de lo específico que estás haciendo, si lo que buscas es que no quede flotando el pie de página explora esto: http://www.cssstickyfooter.com/

El contenedor se va a estirar conforme al contenido siempre y cuando se mantenga el flujo de las cajas.
Lo que rompe este flujo son floats y posiciones absolutas. Para hacer que se estire hasta cierto punto un contenedor con un float dentro, pones además en el contenedor la opción overflow: hidden;

arcanisgk122 · 14/06/2013, 12:12

Consejo deja de usar float... usa mejor display: inline-Block