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