*
{
border: 0;
margin: 0;
}
body
{
font-family: Georgia,Arial, Helvetica, sans-serif;
font-size: medium;
}
/* Si el ancho cambia, hay que reajustar los porcentajes de
la columna central. */
.container
{
width: 800px;
margin: 0 auto;
border:0.01em dotted blue;
}
.header
{
width: 100%;
height: 120px;
background-color: Aqua;
border:0.01em dotted blue;
clear:both;
}
.leftColumn
{
width: 24%;
min-height: 400px;
border:0.01em dotted blue;
float:left;
}
.mainColumn
{
width: 51.2%; /* Ajustar si ancho de Container cambia. */
border:0.01em dotted blue;
min-height: 400px;
float:left;
}
.rightColumn
{
width: 24%;
border:0.01em dotted blue;
min-height: 400px;
float:right;
}
.footer
{
width:100%;
height:50px;
}
#separador
{
clear:both;
}
La estructura básica sería:
<div class="container">
<div class="header">
</div>
<div class="leftColumn">
</div>
<div class="mainColumn">
</div>
<div class="rightColumn">
</div>
<div id="separador">
</div>
<div class="footer">
</div>
</div>
No hay comentarios:
Publicar un comentario