El layout con columnas más simple del mundo (probablemente)

Hace mucho tiempo que deseaba dar definitivamente por cerrados mis quebraderos de cabeza al diseñar sitios web con columnas. Y creo que al fin lo he conseguido.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>TinyCSS</title>
<style type="text/css">
*{margin:0;padding:0;}
h1{font-size:1em;}
.header{border-bottom:1px solid #aaa;}
.container{overflow:hidden;height:100% !important;}
.main{width:500px;margin-bottom:-1000px;padding-bottom:1000px;float:left;}
.sideBar{margin-bottom:-1000px;padding-bottom:1000px;float:right;}
.s1{width:160px;border-left:1px solid #aaa;}
.s2{width:300px;border-left:1px solid #aaa;}
.footer{border-top:1px solid #aaa;}
</style>
</head>
<body>
<div class="header"><h1>Header</h1></div>
<div class="container">
	<div class="sideBar s2"><h1>Sidebar 2</h1></div>
	<div class="sideBar s1"><h1>Sidebar 1</h1></div>
	<div class="main"><h1>Main</h1></div>
</div>
<div class="footer"><h1>Footer</h1></div>
</body>
</html>

Si bien el resultado final es bastante feo (puedes ver una demo aquí) el peso de este documento es de menos de 1Kb. y es compatible con Internet Explorer (versión 6 incluída), Firefox, Chrome, Opera y Safari (Browsershots.org).

No será difícil para un diseñador hábil con las CSS partir de este esqueleto para crear algo mucho más agradable a la vista.

Lo que más me gusta es que los <div> de las columnas pueden crecer al alto tanto como quieras sin preocuparte por sus vecinas, que se prolongarán en lo vertical para que todas sean iguales (con unos ejemplos me explico mejor). Para ello no he usado ni javaScript ni el conocido método Faux Columns, sino un truco CSS que consiste en atribuir

margin-bottom:-1000px; padding-bottom:1000px;

a cada una de las columnas, y

overflow:hidden;

al <div> que las contiene.

Y para terminar, es importante recordar que en la línea

.container{overflow:hidden;height:100% !important;}

height:100% !important; son necesarios para que el sistema sea compatible con IE6. El glorioso día en que IE6 sea desterrado ya no será necesario incluir ese código.

Me ha ayudado mucho un viejo post de Ed Elliot. Gracias Ed!

Acerca de esta entrada

Estás leyendo “El layout con columnas más simple del mundo (probablemente)”, de Quenerapú

Publicado:
15|10|2009 a las 18:19h.
Categoría(s):
CSS
Etiquetas:
, ,