Dos columnas, problemas

[thunder.scripts]

Tengo un HTML así:

Código HTML:

<div id="derecha"></div>
<div id="izquierda" style="width: 150px;"></div> 

Cómo hago para que #izquierda quede a la izquierda con ese ancho fijo, y que #derecha se ajuste al lado de izquierda ocupando todo el ancho disponible?

Gracias
Fede

[culantrax]

Una posible solución:

Código:

<style>
#izq {
position: absolute;
width: 150px;
}

#der{
margin-left: 150px;
}
</style>

Saludos!

[gustavoang]

Yo diría:

#derecha{float:right;width:100%}
#izquierda{clear:left;width:150px}

Otra opción, pero te funcionaría con los últimos browsers:

#derecha{display:table-cell;}
#izquierda{display:table-cell;width:150px}

Saludos.

[thunder.scripts]

Gracias a los dos, pero...

1. Lo de table-cell preferiría no usarlo, además de que pondría mis divs exactamente al revés de como lo quiero (considerando que izquierda está debajo de derecha)

2. Los otros ya los había probado, pero no funcionan

Otra idea?

[gustavoang]

Hola.

No entiendo porqué no te funciona la primera sugerencia... Yo estoy haciendo un sitio y uso esa técnica para hacer lo mismo que tu quieres hacer.

Es más, lo he probado en Linux y Windows, con Firefox e Internet Explorer... y todo funciona.

Saludos.

[ramm]

Una pregunta
Por qué no pones los divs al reves?
lo lógico es que esten al reves, no como los tienes ahorita.

[thunder.scripts]

Buscadores y accesibilidad (sin hojas de estilo el contenido debería aparecer primero ya que es lo más importante, por lo menos así me es más útil a mí).

Qué raro, a mi no funciona ni ahí Me queda izquierda por debajo.

---------------------------

EDIT: Me funcionó con el ejemplo de culantrax :D Supongo que cuando lo probé nombré mal las clases o algo

Perdón y gracias.

[asinox]

Iniciado por gustavoang

Yo diría:

Otra opción, pero te funcionaría con los últimos browsers:

#derecha{display:table-cell;}
#izquierda{display:table-cell;width:150px}

Saludos.

No funciona con IE6.0 si con los anteriores, pero funciona totalmente con los demas navegadores.

aqui tengo dos tutos al respecto con las columnas: http://www.asinox.net/?p=23
y
http://www.asinox.net/?p=2

Este ultimo con table:cell pero no sirve para IE, mientras que el primero para todos los navegadoes con <dl><dt> y <dd>

Saludos

[thunder.scripts]

Saben que el de culantrax me funcionó, pero el problema es que está dentro de un contenedor y éste no se expande cuando el div con posición absoluta sobrepasa el tamaño del contenedor (obviamente).

Voy a probar con los tutoriales que puso asinox (definitivamente tengo que practicar más con CSS).

EDIT: Ya lo estuve mirando, el problema es que al tener los divs distinto orden me surge el mismo problema que tengo ahora. Si alguien sabe la solución agradecería mucho que lo pongan acá Mientras tanto voy a seguir como estoy ahora.

Probablemente opte por darle ancho fijo a los dos divs, de esa forma no tengo problemas.

Suerte
Fede