Layout con scroll horizontal

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

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

Rafael · #2 (**permalink**) 22/10/2005, 10:56

Usa un div contenedor:
<div style="width: 1000px;">

thunder.scripts · #3 (**permalink**) 22/10/2005, 11:17

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