Sé que este tema se ha tocado con anterioridad porque he revisado varias publicaciones pasadas y otras páginas también. Mi situación es esta: estoy trabajando una página con el 960 gryd system. Todo parecía ir a la perfección... PERO. Bueno…
Mi estructura del body en mi index.html es el siguiente:
Código:
Y mi CSS:<…>
<body>
<div id="contenedor" class="container_12">
<div id="cabeza"></div>
<div id="menu"></div>
<div id="contenido" class="container_12">
<div id="article" class="grid_8">
<h1></h1>
<p>TEXTO FALSO </p>
</div>
<div id="sidebar" class="grid_4">
<h3></h3>
<p>TEXTO FALSO</p>
</div>
</div>
<footer> </footer>
</div>
</body>
Código:
El problema que tengo es que cuando aumento el texto falso en el div del "article", el div del "contenido" no se extiende mientras que el article sí. ¿Alguien sabrá cuál es el error? .container_12 {margin-left: auto; margin-right:auto; width:960px; padding-top:0;}
.grid_1 al .grid_12 {display: inline; float: left; margin-left:10px; margin-right: 10px;}
.grid_1 {width: 60px;}
.grid_2 {width: 140px;}
(c/Grid definido en width)
html {width:100%; height:100%; margin: 0px; position: relative}
body {min-width: 960px; background-color: #772081; margin-top:0; margin-right: 0; margin-bottom: 0; margin-left: 0; width: 100%; height:100%}
#contenedor {background-color: #E5E5E5; height:100%; min-height:100%; position:relative; margin: auto;}
#contenedor:after{height:150px; display:block; clear:both;} /*height es el mismo valor del margin del footer) */
#contenido {background-color:#E5E5E5; height:100%; min-height:100%;}
#contenido #article {float:left; background-color: white; border-color: gray;}
#contenido #sidebar {float: left; background-color: white; border-color: gray;}
footer{position:absolute; height: 150px; margin: -150px auto 0; background-color: black;}
