Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 18-jul-2005, 15:51   #1 (permalink)
thunder.scripts está en el buen camino
 
Avatar de thunder.scripts
 
Fecha de Ingreso: febrero-2005
Mensajes: 646
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
www.vmgdesign.com.ar
thunder.scripts está desconectado   Responder Citando
Antiguo 18-jul-2005, 16:46   #2 (permalink)
culantrax está en el buen camino
 
Fecha de Ingreso: julio-2005
Mensajes: 54
Una posible solución:
Código:
<style>
#izq {
position: absolute;
width: 150px;
}

#der{
margin-left: 150px;
}
</style>
Saludos!
culantrax está desconectado   Responder Citando
Antiguo 18-jul-2005, 20:29   #3 (permalink)
gustavoang está en el buen camino
 
Avatar de gustavoang
 
Fecha de Ingreso: julio-2003
Ubicación: Valencia - Venezuela
Mensajes: 253
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.
gustavoang está desconectado   Responder Citando
Antiguo 18-jul-2005, 21:11   #4 (permalink)
thunder.scripts está en el buen camino
 
Avatar de thunder.scripts
 
Fecha de Ingreso: febrero-2005
Mensajes: 646
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
www.vmgdesign.com.ar
thunder.scripts está desconectado   Responder Citando
Antiguo 18-jul-2005, 21:27   #5 (permalink)
gustavoang está en el buen camino
 
Avatar de gustavoang
 
Fecha de Ingreso: julio-2003
Ubicación: Valencia - Venezuela
Mensajes: 253
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.
gustavoang está desconectado   Responder Citando
Antiguo 18-jul-2005, 21:27   #6 (permalink)
ramm ha deshabilitado el karma
 
Avatar de ramm
 
Fecha de Ingreso: junio-2004
Mensajes: 198
Una pregunta
Por qué no pones los divs al reves?
lo lógico es que esten al reves, no como los tienes ahorita.
ramm está desconectado   Responder Citando
Antiguo 19-jul-2005, 00:50   #7 (permalink)
thunder.scripts está en el buen camino
 
Avatar de thunder.scripts
 
Fecha de Ingreso: febrero-2005
Mensajes: 646
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
www.vmgdesign.com.ar
thunder.scripts está desconectado   Responder Citando
Antiguo 19-jul-2005, 11:54   #8 (permalink)
asinox ha deshabilitado el karma
 
Avatar de asinox
 
Fecha de Ingreso: noviembre-2002
Ubicación: httpdocs
Mensajes: 2.562
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.noxmediastudio.com
asinox.wordpress.com
asinox está desconectado   Responder Citando
Antiguo 19-jul-2005, 14:22   #9 (permalink)
thunder.scripts está en el buen camino
 
Avatar de thunder.scripts
 
Fecha de Ingreso: febrero-2005
Mensajes: 646
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
www.vmgdesign.com.ar

Última edición por thunder.scripts; 19-jul-2005 a las 14:29.
thunder.scripts está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 23:27.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93