La gerararquía de las columnas es la siguiente:
<izquierda> <<centro> <derecha>>
Una columna a la izquierda y otras dos agrupadas a la derecha de esta.
La columna del centro es la principal y es la que tiene una animación flash arriba y el contenido de texto que puede crecer.
El problema es que cuando esa columna crece ni la columna derecha ni izquierda lo hacen y quiero que crezcan manteniendo el color de fondo. Intenté con height:auto pero nada. Lo que hice fue poner al estilo dosColumnas el mismo color de fondo que esas dos columnas y si lo hizo pero la columna izquierda como no está anidada no puedo hacerle eso.
Este es mi css:
Código :
html, body{ margin:0; padding:0; text-align:center; background-image:url(images/madera.jpg); } #anchoPagina{ width:738px; text-align:left; margin-top:20px; margin-left:auto; margin-right:auto; } #encabezado{ position:relative; height:20px; background-color:#78423C; width:auto; } #columnaDerecha{ width:4%; float:right; position:relative; } #columnaPrincipal{ float: left; display:inline; position: relative; width:96%; } #dosColumnas{ width:65%; float:right; position:relative; height:auto; background-color:#336699; } #columnaIzquierda{ width:35%; float:left; position:relative; background-color:#336688; height: auto; } #flash{ position:relative; text-align:center; height:206px; width:100%; background-repeat:no-repeat; } #contenido{ position:relative; text-align:center; background-color:#FFFFFF; }
Este es mi html:
Código :
<div id=\"anchoPagina\"> <div id=\"encabezado\" ></div> <div id=\"dosColumnas\"> <div id=\"columnaPrincipal\"> <div id=\"flash\"></div> <div id=\"contenido\"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> </div> <div id=\"columnaDerecha\" ></div> </div> <div id=\"columnaIzquierda\"></div> </div>
Como podrán ver puse br para que el contenido creciera y ver que pasaba. EL problema me da tanto en firefox como ie.
Recuerden que soy nuevo así que cualquier sugerencia será bienvenida
Gracias!!