Mira este ejemplo
Código HTML:
<div id="container">
<div id="header ">
<h1>Título </h1>
<h2 >Subtítulo </h2>
</div>
<div id="sidebar">
<h3 >Sección </h3>
<p>Bla bla ... </p>
</div>
<div id= main">
<h3 >Sección </h3>
<p>Contenido principal </p>
</div>
<div id="footer">
<p>Pie de página </p>
</div >
</div >
#container
Esta capa es un contenedor para el resto de la página. Establece
la anchura de todo y es la que centra el contenido. El truco
está en usar auto dentro de margin para lograr el centrado. Esto
no funciona en el IE, así que tendremos que echar mano de
text-align: center en el body. El CSS completo es este:
Código HTML:
body {
text-align: center;
}
# container {
width: 700 px;
margin: 0px auto;
text-align: left;
}
Para la barra lateral utilizas
Código HTML:
float: left;
ahora bien. para que el footer te quede abajo utiliza
Código HTML:
clear: both;
NOTA
Cita: :tu puedes alterar el orden en que quieras que aparezcan los elementos siempre y cuando tomes esa precauciones.