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.