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!!
