Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/07/2011, 08:43
a_s_d_f
 
Fecha de Ingreso: marzo-2011
Mensajes: 13
Antigüedad: 13 años, 1 mes
Puntos: 1
Maquetacion de Web a 2 columnas.

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:
Ver original
  1. #wrap {
  2.         width:100%;
  3.         margin:0 auto;
  4. }
  5.  
  6. #header {
  7.         padding:5px 10px;
  8.         background:#3b5998;
  9. }

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:
Ver original
  1. #sidebar {
  2.         float:left;
  3.         width:15%;
  4.         background:#f67a20;
  5. }
  6.  
  7. #main {
  8.         float:right;
  9.         width:85%;
  10.         background:#fff;
  11. }
  12.  
  13. #footer {
  14.         clear:both;
  15.         padding:5px 10px;
  16.         background:#004990;
  17. }

Alguien que me pueda echar la mano?
Gracias.