Foros del Web » Creando para Internet » CSS »

Web con 2 columnas, sin saber cual es la más alta y con todo el ancho de la ventana

Estas en el tema de Web con 2 columnas, sin saber cual es la más alta y con todo el ancho de la ventana en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/04/2005, 16:46
 
Fecha de Ingreso: noviembre-2002
Mensajes: 1.341
Antigüedad: 21 años, 5 meses
Puntos: 17
Web con 2 columnas, sin saber cual es la más alta y con todo el ancho de la ventana

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.
  #2 (permalink)  
Antiguo 05/04/2005, 00:27
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 19 años, 1 mes
Puntos: 0
Hola

Lo que tu quieres es algo asin??
Código HTML:
<table width="100%">
  <tr>
    <td width="132">Lateral</td>
    <td>Principal</td>
  </tr>
</table> 
Con este código obtienes dos columnas, la primera de tamaño fijo y la segunda que ocupa el resto de la página.
__________________
Salu2
KAYETANO
  #3 (permalink)  
Antiguo 05/04/2005, 01:27
 
Fecha de Ingreso: noviembre-2002
Mensajes: 1.341
Antigüedad: 21 años, 5 meses
Puntos: 17
Más o menos, usando tablas no tengo muchos problemas, pero quería hacerlo todo a través de CSS, gracias de todos modos.

¿Hay alguna posibilidad de hacer esto con divs en vez de con tablas?

Saludos
  #4 (permalink)  
Antiguo 05/04/2005, 02:02
Avatar de jam1138
/** @package Moderador */
 
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 19 años, 8 meses
Puntos: 102
Saludos... disculpa por no ver tu código... además de que poco sé de CSS .... na más acabo de ver este link en el foro de HTML; http://tierradenomadas.com/tw003.phtml y ahí viene un ejemplo de lo que buscas. Espero te sirva .
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:18.