Problema con columna a la izquierda.

[daPhyre]

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

[DragonX]

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

[daPhyre]

#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

[DragonX]

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

y listo el pollo

1abrazo

[DragonX]

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

no dije nada....

[daPhyre]

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

[jomaruro]

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.

[alexk]

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...

[daPhyre]

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.

[alexk]

jeje pues que bien... que se haya solucionado...