Maquetacion de Web a 2 columnas.

[a_s_d_f]

Hola compañeros, quiero maquetar una web con CSS a 2 columnas.

El esqueleto de mi web es:

<div id="wrapper">
<div id="topbar"></div>
<div id="sidebar"></div>
<div id="main"></div>
<div id="footbar"></div>
</div.

Quiero que el topbar, este pegado al borde superior de la pantalla, esto si lo puedo lograr, con las siguientes instrucciones CSS

Código CSS:

#wrap {
        width:100%;
        margin:0 auto;
}
 
#header {
        padding:5px 10px;
        background:#3b5998;
}
 

Sin embargo, las dos columnas, no quiero que se extiendan a lo largo de toda la pantalla, en cambio las quiero centradas.
Es decir, tener cierto "espacio muerto" a los lados de la pagina.

Mas o menos como la pagina principal de Facebook, que esta la barra superior a lo largo de la pantalla, pero el feed de noticias y los updates, y la publicidad estan "al centro" de la página... espero me explique.

Esa es la parte que no puedo lograr, lo que tengo en mi css para la div de sidebar y main es:

Código CSS:

#sidebar {
        float:left;
        width:15%;
        background:#f67a20;
}
 
#main {
        float:right;
        width:85%;
        background:#fff;
}
 
#footer {
        clear:both;
        padding:5px 10px;
        background:#004990;
}
 

Alguien que me pueda echar la mano?
Gracias.

[a_s_d_f]

Compañeros, que creen? Ya pude, solo era de cambiar la propiedad de float:left en #sidebar a float:right!

Muchas gracias

[cristian_cena]

Hola, a modo de sugerencia , siempre que trabajes con elementos flotados encerralos en un contenedor y a este ponele overflow:hidden;
Con esto te evitas de usar clear.
En este link lo podes ver. Espero te sirva.

Saludos.