Foros del Web » Creando para Internet » CSS »

Dos columnas, problemas

Estas en el tema de Dos columnas, problemas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/07/2005, 16:51
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #2 (permalink)  
Antiguo 18/07/2005, 17:46
 
Fecha de Ingreso: julio-2005
Mensajes: 54
Antigüedad: 12 años, 5 meses
Puntos: 0
Una posible solución:
Código:
<style>
#izq {
position: absolute;
width: 150px;
}

#der{
margin-left: 150px;
}
</style>
Saludos!
  #3 (permalink)  
Antiguo 18/07/2005, 21:29
Avatar de gustavoang  
Fecha de Ingreso: julio-2003
Ubicación: Valencia - Venezuela
Mensajes: 253
Antigüedad: 14 años, 4 meses
Puntos: 1
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.
__________________
Gustavo Narea.
Venezuela.
  #4 (permalink)  
Antiguo 18/07/2005, 22:11
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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?
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #5 (permalink)  
Antiguo 18/07/2005, 22:27
Avatar de gustavoang  
Fecha de Ingreso: julio-2003
Ubicación: Valencia - Venezuela
Mensajes: 253
Antigüedad: 14 años, 4 meses
Puntos: 1
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.
__________________
Gustavo Narea.
Venezuela.
  #6 (permalink)  
Antiguo 18/07/2005, 22:27
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Una pregunta
Por qué no pones los divs al reves?
lo lógico es que esten al reves, no como los tienes ahorita.
  #7 (permalink)  
Antiguo 19/07/2005, 01:50
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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.
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #8 (permalink)  
Antiguo 19/07/2005, 12:54
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
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
__________________
www.dataautos.com
  #9 (permalink)  
Antiguo 19/07/2005, 15:22
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar

Última edición por thunder.scripts; 19/07/2005 a las 15:29
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:23.