Layout dos columnas con scroll horizontal

thunder.scripts · #1 (**permalink**) 24/10/2005, 12:00

Tengo que maquetar un sitio con dos columnas: la primera con ancho fijo y la segunda con scroll horizontal.

Probé más que nada con display:table y derivados, pero en IE no va ni para atrás ni para adelante.

¿Alguna idea para hacerlo sin doscientas tablas?

Gracias
Fede

Rafael · #2 (**permalink**) 24/10/2005, 13:27

#Contenido va a ser un div con overflow: auto.

Ponle ancho 100% y alto fijo.

thunder.scripts · #3 (**permalink**) 24/10/2005, 13:46

Perdón :x Me confundí de pregunta. Mi problema real era que (y de hecho ya lo pregunté) al insertar bloques en #content necesitaba que se vayan acomodando uno al lado del otro, aunque se acabe el espacio (de modo que aparezca el scroll). Alguien me recomendó que insertara un div dentro de #content y le diera el ancho necesario para que aparezcan todos los bloques, pero no funciona, no aparece el scroll. Probablemente esté haciendo algo mal, les muestro el código (un poco simplificado):

Código HTML:

<div id="logo" style="float: left; width: 250px; background: #999; height: 500px;">
</div>

<div id="content" style="background: #666; overflow:auto; height: 500px; ">
    <div style="width: 2000px;">
	<div style="width: 250px; background: #333; float:left">test</div>
	<div style="width: 250px; background: #333; float:left">test</div>
	<div style="width: 250px; background: #333;float:left">test</div>
	<div style="width: 250px; background: #333;float:left">test</div>
	<div style="width: 250px; background: #333;float:left">test</div>
	<div style="width: 250px; background: #333;float:left">test</div>
	<div style="width: 250px; background: #333;float:left">test</div>
	<div style="width: 250px; background: #333;float:left">test</div>
    </div>
</div>

EDIT: si le doy 100% a #content, se me encima sobre #logo.
EDIT 2: jaaa es en Opera que no funciona, en Fx va perfecto. En IE ni hablar.

Gracias
Fede

Rafael · #4 (**permalink**) 25/10/2005, 19:23

ver si es esto

<div id="content" style="background: #6F6; overflow:auto; height: 500px; width: 100%">

Solo agrega width 100% para que tenga una medida, que al ser rebasada aplique el overflow.

programeitor · #5 (**permalink**) 26/10/2005, 13:49

<!DOCTYPE HTML PUBLIC>

<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>
pagina horizontal
</title><style>
html{overflow-y:hidden;}
body{margin:0 auto;width:1000px;}
div{width:200px;float:left;}
</style></head><body>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</body></html>

Rafael · #6 (**permalink**) 26/10/2005, 21:58

Programeitor, lo que necesita es el overflow dentro de uno de los divs.

programeitor · #7 (**permalink**) 27/10/2005, 19:53

Esto es lo mas cerca que lo puedo dejar, el scroll vertical no se como quitarselo a Ns-Ff.

<!DOCTYPE HTML PUBLIC>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
div extrabody con scroll horizontal
</title><style>
html,body{overflow:hidden;}
body{margin:0 auto;width:90%;height:100%;}
div{border:1pxsolid;height:100%;}
#uno{width:30%;float:left;}
#dos{width:65%;float:left;overflow:scroll;overflow-y:hidden;}
#tres{width:800px;}
</style></head><body>
<div id="uno">test</div>
<div id="dos">
<div id="tres">test</div>
</div>
</body></html>


Saludos.