Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Dos columnas, problemas (http://www.forosdelweb.com/f53/dos-columnas-problemas-317738/)

thunder.scripts 18/07/2005 15:51

Dos columnas, problemas
 
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 18/07/2005 16:46

Una posible solución:
Código:

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

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

Saludos!

gustavoang 18/07/2005 20:29

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 18/07/2005 21:11

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 18/07/2005 21:27

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 18/07/2005 21:27

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 19/07/2005 00:50

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í :no: 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 19/07/2005 11:54

Cita:

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 19/07/2005 14:22

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á :aplauso: 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


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

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.