En este tutorial vamos a ver como crear una página web con una estructura de dos columnas; en primer lugar colocaremos el sidebar o menu de enlaces a la izquierda y luego veremos como ponerlo a la derecha. Además le añadiremos una cabecera y un pie de página.
Explicanco el código:
Simplemente hemos creado una capa que va a englobar toda la web llamada contenedor, le hemos añadido una cabecera, un pie de página y el cuerpo del documento, que a su vez engloba la estructura de dos columnas, la de la izquierda llamada sidebar y la de la derecha llamada contenido_general.
Al sidebar le hemos especifícado una anchura de 170px y le hemos hecho flotar a la izquierda con float: left. Importantísimo esto último ya que con ello se consigue que la capa sidebar se quede a la izquierda y permita que el contenido de la capa contenido_general se coloque a la misma altura y a su derecha.
A la capa contenido_general le aplicamos un margin-left de 190px, es decir, 170px que ocupa el sidebar mas 20px que dejariamos de margen entre una y otra capa. Como esta capa no tiene definida una anchura, se hará de grande como le permita la capa contenedor.
BODY {
font: 8pt Verdana, Arial;
margin: 10px 0px 10px 0px;
text-align: center;
background-color: #FFF;
}
#contenedor {
text-align: left;
width: 800px;
margin: auto;
}
#cabecera {
background-color: #000;
color: #FF0000;
height: 75px;
font-size: 1.6em;
font-weight: bold;
padding: 10px 5px 3px;
text-align: center;
}
#cuerpo {
margin: 10px 0px 10px 0px;
}
#sidebar {
float: left;/
width: 170px;
}
#sidebar ul {
list-style: none;
border-bottom: 1px solid #000;
padding: 0;
margin: 0;
}
#sidebar li {
border-top: 1px solid #000;
font-weight: bold;
padding: 0.25em;
}
#sidebar a {
color: #FF0000;
text-decoration: none;
}
#sidebar a:HOVER {
color: #000;
text-decoration: none;
}
#contenido_general {
color: #444;
margin-left: 190px;
background-color: #F2F2F2;
padding: 4px 4px 4px 4px;
}
#pie {
height: 25px;
background-color: #000;
color: #FF0000;
text-align: center;
padding: 10px 10px 3px 10px;
}
<div id="contenedor">
<div id="cabecera">
Esta es la cabecera o header
</div>
<div id="cuerpo">
<div id="sidebar">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca De</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Fotografía</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="contenido_general">
Orfeo, teólogo, poeta y célebre músico, era hijo de Eagro, rey de Tracia.
......
</div>
</div>
<div id="pie">
Este es el pie de página
</div>
</div>
Si quisieramos estructurar la web de la misma manera pero con el sidebar o menu a la derecha y el contenido a la izquierda solo habria que hacer unos pequeños cambios en el código css.
Tendriamos que hacer que la capa sidebar flotara a la derecha en vez de a la izquierda, sustituyendo el float:left por float:right, de la misma manera cambiariamos el margin-left de la capa contenido_general por margin-right.
#sidebar {
float: right;
width: 170px;
}
#contenido_general {
color: #444;
margin-right: 190px;
background-color: #F2F2F2;
padding: 4px 4px 4px 4px;
}
