Foros del Web » Creando para Internet » CSS »

Problema con columna a la izquierda.

Estas en el tema de Problema con columna a la izquierda. en el foro de CSS en Foros del Web. Buen día compañeros del foro. Actualmente me estoy enfrentando a un problema con una segunda columna. Con este HTML: Código HTML: <div id= "container" > ...
  #1 (permalink)  
Antiguo 24/02/2010, 14:27
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Problema con columna a la izquierda.

Buen día compañeros del foro.

Actualmente me estoy enfrentando a un problema con una segunda columna. Con este HTML:

Código HTML:
<div id="container">
<div id="signbook">signbook</div>
<div id="content">contenido</div>
</div> 
En un comienzo, tenía el código de esta forma:

Código:
#content{background:#fff;margin-right:18em}
#signbook{background:#f66;width:14em;float:right}
Esto, dentro de un divisor "container" con overflow:hidden y position:relative. Esto me funcionaba perfectamente en Firefox, ya que el margin-right del content hace que no quede detrás del elemento flotante. Pero al verlo en Chrome, me toma el margin-right a partir del elemento flotante "signbook", por lo que si lo borraba, se veía bien en Chrome y mal en Firefox.

Después de un rato, me las arreglé con el código de esta forma:

Código:
#content{background:#fff;margin-right:18em}
#signbook{background:#f66;width:14em;position:absolute;right:0}
Con la posición absoluta, parecía funcionar ahora sin problemas el código, pero más tarde me di cuenta terriblemente, que si "content" tenía menor altura que "signbook", este último se perdía parcialmente por el overflow:hidden del "container". No puedo darle un min-height ya que su contenido es generado por PHP y su altura es siempre variable.

¿Alguien sabría alguna forma para tratar este problema?

Edito: Dejo un enlace para referencia visual y de código: http://biblioteca.daphyre.net/lipsum.php
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Última edición por daPhyre; 24/02/2010 a las 16:34
  #2 (permalink)  
Antiguo 24/02/2010, 14:37
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Problema con columna a la izquierda.

y que pasaria si a #signbook y #content a los dos los pones dentro de un gran div y a ese le pones overflow:hidden, no al content?

Abrazo
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 24/02/2010, 14:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Problema con columna a la izquierda.

#container (El que contiene a ambos) es el que tiene el overflow:hidden que hace este efecto maligno.

#content tiene un overflow:hidden por otros elementos que tengo en él
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 24/02/2010, 16:16
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Problema con columna a la izquierda.

a #signbook sacale el position:absolute y ponele float:right;

y listo el pollo

1abrazo
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 24/02/2010, 16:19
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Respuesta: Problema con columna a la izquierda.

mmmm..........nop, se te va el fondo para abajo.....

no dije nada....
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #6 (permalink)  
Antiguo 24/02/2010, 16:36
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Problema con columna a la izquierda.



De cualquier forma, desde un principio comenté el por qué quité le float:right. Gracias por la ayuda, ojalá podamos sacar luz a este asunto
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 26/02/2010, 14:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problema con columna a la izquierda.

Hola:

¿Y si en lugar de overflow:hidden le pones overflow:auto?

Retiro lo que he dicho, acabo de probar con el firebug y eso hace que aparezca un scroll que destroza la página.

Saludos.


Última edición por jomaruro; 26/02/2010 a las 14:26 Razón: Rectificar Solución Por No Válida
  #8 (permalink)  
Antiguo 26/02/2010, 14:43
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 8 meses
Puntos: 137
Respuesta: Problema con columna a la izquierda.

bueno no entiendo que quieres hacer exactamente,
ami parecer lo el float right que tenias esta correcto... solo que #content sin el margin-right con un ancho, y poniendo #signbook debajo de #content en el html...
bueno es que no logro entender que quieres hacer jaja...
__________________
Toroflix - movies.
  #9 (permalink)  
Antiguo 26/02/2010, 23:52
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años
Puntos: 142
Respuesta: Problema con columna a la izquierda.

alexk!! Sos un genio!!!

Lo que pasa es que todo este tiempo he estado acostumbrado a hacer el margin-left para el menú a la izquierda, que me despistó por completo a la derecha. Solo debía ponerle un ancho sin margin-right y se olvida uno por completo de los problemas

Como ocurre que cuando entras en cosas tan complicadas, pasas por alto los detalles más simples. ¡Muchísimas gracias!

PD: El orden del css para #singbook y #content parece no afectar. Gracias.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 27/02/2010, 09:25
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 8 meses
Puntos: 137
Respuesta: Problema con columna a la izquierda.

jeje pues que bien... que se haya solucionado...
__________________
Toroflix - movies.

Etiquetas: columna, izquierda
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 07:41.