Cómo poner una sidebar en tu web

Ver tutorial de cómo crear una web

Ya sabemos cómo crear una web, pero todo está en un mismo sitio. No hay sidebar.

Lo que vamos a aprender a hacer es una barra lateral en el blog. El código tiene que ir antes de </body>:

<style>

* {margin: 0; padding: 0}

#wrapper {width: 1000px; margin: auto; overflow: auto; background: #ADDEFE;}

#contenido {width: 700px; float: left; background: #ADDEFE;}

#sidebar {width: 300px; float: right}

</style>

<div id="wrapper">

        <div id="contenido">

NOTICIAS

        <div style="height:500px"></div>

        </div>

<div id="sidebar">LO QUE HAY EN LA SIDEBAR</div>

               <div style="height:500px"></div>

</div> 

Primero veremos cómo está estructurado el código.

Como vemos, hemos creado una variable #wrapper, #contenido y #sidebar, del cual hemos puesto un tamaño y un color de fondo. 

El wrapper es todo el espacio que va a ocupar la página web (el contenido más la sidebar) y hemos puesto que tenga 1.000 píxeles, que es lo que se suele poner. Si quisieses que el contenido o la sidebar fuese más pequeño o más grande, ajustas los px pero teniendo en cuenta de que entre los dos deben sumar el valor del wrapper.

Después hemos puesto el contenido y la sidebar, y vemos que entre las dos suman 1.000.

En la segunda parte del código vemos que el wrapper se divide a su vez en "contenido" y "sidebar", y ahí es donde pondremos el contenido de cada uno.

Eso es todo, pero por si quedan algunas dudas, voy a poner un ejemplo de la segunda parte del código (la primera parte creo que es fácil)

<div id="wrapper">

        <div id="contenido">

Bienvenidos a la web de Campamento Web. Esto es un ejemplo de lo que podrás crear con una sidebar. Este es el contenido con las noticias o lo que quieras poner.

         <div style="height:500px"></div>

        </div>

<div id="sidebar"> Esto se ve en la sidebar, y esta es una imagen: <a href="http://campamentoweb.blogspot.com/2012/02/crea-tu-pagina-web-desde-cero.html"><img src="http://dl.dropbox.com/u/55341396/creaweb.png" /></a><div></div>

</div> 

Como ves, puedes colocar tanto textos, como otros códigos HTML para colocar imágenes o lo que quieras.

VER WEB DE EJEMPLO