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