Foros del Web » Creando para Internet » CSS »

Layout con scroll horizontal

Estas en el tema de Layout con scroll horizontal en el foro de CSS en Foros del Web. Tengo que maquetar un sitio con un scroll horizontal. Estuve probando un poco y la única forma que se me ocurrió de hacerlo es emular ...
  #1 (permalink)  
Antiguo 22/10/2005, 11:24
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
Layout con scroll horizontal

Tengo que maquetar un sitio con un scroll horizontal. Estuve probando un poco y la única forma que se me ocurrió de hacerlo es emular una tabla usando display:table/table-cell, pero obviamente en ie no va para atrás.

Les dejo el código que estoy usando:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Untitled Document</title>
	<style type="text/css">
		html {
			height: 100%;
			display: table;
		}
		body {
			padding: 0;
			margin: 0;
			display: table-cell;
			vertical-align: middle;
			height: 100%;
		}
		
		#logo {
			width: 350px;
			height: 350px;
			background: #F00;
			float: left;
		}
		
		#content {
			height: 330px;
			overflow: scroll;
			padding: 10px;
			background-color: #0000FF;
		}
				
		.box {
			width: 250px;
			height: 250px;
			background-color: #00FF00;
			display: table-cell;
			border: 1px solid #000;
			padding: 10px;
			margin: 5px;
		}
	</style>
</head>

<body>
	<div id="logo">
		Logo
	</div>
	
	<div id="content">
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
		<div class="box">Caja</div>
	</div>
</body>
</html> 
Mi problema no es el scroll, sino que todos los divs de adentro de #content tienen que quedar uno al lado del otro, y eso no tengo idea de cómo hacerlo sin usar display:table-cell. Probé con float:left pero los empuja hacia abajo cuando se acaba el espacio horizontal.

¿Alguna idea para mejorar la hoja de estilos o un hack para que el ie la interprete correctamente?

EDIT: no quiero tener que recurrir a una tabla propiamente dicha.

Gracias
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #2 (permalink)  
Antiguo 22/10/2005, 11:56
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Usa un div contenedor:
<div style="width: 1000px;">

Última edición por Rafael; 22/10/2005 a las 12:05
  #3 (permalink)  
Antiguo 22/10/2005, 12:17
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
No se me había ocurrido :D Y es perfecto porque dentro del scroll tengo contenido que si bien es dinámico tiene un ancho fijo, así que no tengo problemas.

Muchas muchas muchas gracias :D
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
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 05:26.