Foros del Web » Creando para Internet » CSS »

Layout dos columnas con scroll horizontal

Estas en el tema de Layout dos columnas con scroll horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/10/2005, 13:00
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
Layout dos columnas con scroll horizontal

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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #2 (permalink)  
Antiguo 24/10/2005, 14:27
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
#Contenido va a ser un div con overflow: auto.

Ponle ancho 100% y alto fijo.
  #3 (permalink)  
Antiguo 24/10/2005, 14:46
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #4 (permalink)  
Antiguo 25/10/2005, 20:23
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
  #5 (permalink)  
Antiguo 26/10/2005, 14:49
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
<!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>
<!-- programeitor 2005, [email protected] -->
  #6 (permalink)  
Antiguo 26/10/2005, 22:58
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Si pero

Programeitor, lo que necesita es el overflow dentro de uno de los divs.
  #7 (permalink)  
Antiguo 27/10/2005, 20:53
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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>
<!-- programeitor 2005, [email protected] -->



Saludos.


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 08:33.