una capa sin scroll y otra con él

angsanchez · #1 (**permalink**) 05/09/2005, 14:41

Hola, amigos. A ver si alguien puede echarme una mano, el posicionamiento con CSS me supera.
Quiero una página dividida en dos capas que queden lado a lado (como si fueran dos marcos en una misma fila).
La capa izquierda debe tener un ancho fijo (500px) y no hacer "scroll". Esto lo tengo conseguido.
La capa derecha debe llenar el ancho restante disponible (es decir, sin ancho fijo) y debe tener un scroll vertical cuando lo necesite.

He hecho esto:

Código PHP:

  body { overflow:hidden; } 
#izqda {  
    position:absolute;  
    width:500px; 
    overflow:hidden;  
} 
#dcha { 
    position:absolute;  
    left:500px;  
    overflow:visible;  
}

No consigo ninguna combinación de "overflow" que llene el ancho disponible sin írseme el texto por la derecha y que al no caber en vertical me aparezca el scroll.

Gracias por anticipado

hunab · #2 (**permalink**) 05/09/2005, 17:03

a ver, lo primero decirte que en tu css no tiene ninguna utilidad el posicionamiento absoluto, podrias probar algo como esto:

#izqda {
float:left;
width:500px;
height:500px;
}

#dcha {
margin-left:500px;
height:500px;
overflow:auto;
}

RoQ · #3 (**permalink**) 05/09/2005, 18:00

ponle overflow:auto al body no hidden

angsanchez · #4 (**permalink**) 06/09/2005, 02:05

Gracias por las respuestas, pero sigue sin funcionar bien.
Con la solución "float" de hunab la capa dcha se me va debajo de la capa izda, mientras que quiero que ambas empiecen desde arriba; por eso necesito "absolute", para poder fijar el "top".
La razón de poner overflow:hidden al body es que no quiero que la capa izda se mueva, por lo cual mi idea era anular los scroll de body e izda y activar el de dcha.
También he intentado definir "height" y "max-height" a 100%, pero me ha dado igual.

Este es un código de prueba que tengo:

Código HTML:

<body>
<div id="izda">
  <img src="algo.gif" width="490" height="490"></div>
<div id="dcha">
Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. 
Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. Texto a rellenar. 
</div>

</body>

Quiero que la imagen esté quieta y que la columnaderecha de texto haga scroll cuando sea necesario.

KnowDemon · #5 (**permalink**) 06/09/2005, 23:15

Prueba con algo como esto:

Código:

#izq{
width: 300px;
height: 300px;
float: left;
border: 1px solid red;
}
#der{
height: 400px;
border: 1px solid blue;
overflow: auto;
}

OJO: En tu HTML debe encontrarse primero el div izquierdo y luego el derecho.

(Con bordes para que todo se vea mejor

)

angsanchez · #6 (**permalink**) 07/09/2005, 01:45

Gracias, KnowDemon
Tu código funciona (y, mirándolo bien, es básicamente como el de hunab, así que algo debí estropear en la prueba anterior).
El problema es que no quiero definir un alto en píxeles para la capa derecha, y en cuanto cambio el "height" a % u otra cosa deja de funcionar.
Entretanto he encontrado otra solución que se adapta mejor a lo que quiero:
http://tagsoup.com/-dev/null-/css/fixed/
Gracias por la ayuda