Buenas,
Estoy intentando maquetar una página con dos columnas, pero tengo algún prblemilla.
En principio lo que quiero es el diseño tipico de una columna delgada tipo menú a uno de los lados y una más ancha al otro lado.
Sólo quiero que tenga ancho predefinido la columna más estrecha, la otra quiero que se expanda hasta completar el ancho total de la ventana del navegador.
El contenido será siempre dinámico, así que no sé cual de las dos columnas va a ser la más alta.
Después de mucho mirar, buscar y probar no he conseguido lo que quiero, lo que más se ha acercado ha sido:
1 - Si pongo ancho predefinido a ambas columnas no hay ningún problema.
2 - Si sé que columna es la más alta también puedo hacer el diseño correctamente.
Lo más cerca que he estado de conseguirlo es con el siguiente css:
.Principal {
width: auto;
overflow: hidden;
min-width: 500px;
}
.Izq {
float: left;
overflow: hidden;
width: 132px;
}
.Pie {
clear: both;
}
.Pagina {
width: 100%;
}
Y en el HTML tendría algo parecido a esto:
<div class = "Pagina">
<div class= "Cabecera">
Cabecera
</div>
<div class="Izq">
Capa izquierda Capa izquierda Capa izquierda Capa izquierda Capa izquierda Capa izquierda Capa izquierda
</div>
<div Class="Principal">
Capa central Capa central Capa central Capa central Capa central Capa central Capa central
</div>
<div Class="Pie">
Pie
</div>
</div>
He probado en varios navegadores (Firefox, Konqueror) y el resultado es bastante satisfactorio. Sin embargo en Internet Explorer no se ve bien, ya que la columna de la izquierda (la flotante) aparece por encima de la principal.
¿Alguna posible solución a esto?
Saludos.