CSS: Un ejemplo muy chulo y util

A continuación pongo una hoja de estilos que combinada con una página html básica como la que muestro a continuación nos permite crear una página facilmente mantenible.

<body class="sm">
<div id="header"></div>
<div id="body">
<div id="main"></div>
<div id="sidebar"></div>
</div>
</body>

Unicamente con 2 estilos (sm o ms) SidebarMain o MainSidebar se puede mantener un sistema de páginas. Cuando utilizas <body class="ms"> (main sidebar) el main se pone a la izquierda y el sidebar a la derecha, si utilizas <body class="sm"> (sidebar main) el sidebar se muestra a la izquierda y el main a la derecha. Si no indicamos ninguna clase para body unicamente tendremos una sección main que ocupa toda la zona. Los bordes los he puesto para ver mejor los div.

div#body

{
margin:auto;
width:710px;
}
div#header
{
margin:0px auto 10px auto;
width:710px;
border:dotted 1px #ccc;
}
div#sidebar
{
display:none;
border:solid 1px #CCC;
}
body.ms div#main, body.sm div#main
{
width:490px;
}
body.ms div#sidebar, body.sm div#sidebar
{
display:block;
width:200px;
border:solid 1px #CCC;
}
body.ms div#main, body.sm div#sidebar
{
float:left;
border:solid 1px #CCC;
}
body.sm div#main, body.ms div#sidebar
{
float:right;
border:solid 1px #CCC;

}

Anuncios