Foros del Web » Creando para Internet » CSS »

Maquetacion de Web a 2 columnas.

Estas en el tema de Maquetacion de Web a 2 columnas. en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 10/07/2011, 08:43
 
Fecha de Ingreso: marzo-2011
Mensajes: 13
Antigüedad: 6 años, 7 meses
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.
  #2 (permalink)  
Antiguo 10/07/2011, 08:45
 
Fecha de Ingreso: marzo-2011
Mensajes: 13
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Maquetacion de Web a 2 columnas.

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

Muchas gracias
  #3 (permalink)  
Antiguo 10/07/2011, 08:56
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 4 meses
Puntos: 269
Respuesta: Maquetacion de Web a 2 columnas.

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.

Etiquetas: maquetacion, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:04.