Blog and Web

  • Inicio
  • Foro para Blogger
  • Nosotros
  • Publicidad
  • Plantillas Blogger
  • Categorias
    • Adsense
    • Blogandweb
    • Blogger
    • Blogs
    • CSS
    • Diseño
      • Fuentes
      • Iconos
      • Logos
    • Dominios
    • Geek
    • HTML
    • Javascript
    • México
    • Notas rápidas
    • Photoshop
      • Brushes
    • PHP
    • Plantillas Blogger
    • Productos Google
      • Firefox
    • Recursos en linea
    • Red
    • SEO
    • Software
    • Tutoriales
    • Uncategorized
    • Web 2.0
    • Widgets para Blogger
    • Wordpress
      • Plugins
      • Themes
  • Suscríbete vía RSS
« Validar tu página HTML en el 3WC
Selecciones dificiles en Photoshop »

Hacer dos columnas con CSS

Febrero 24th, 2007  |  Publicado por Francisco en CSS  |  2 Comentarios

No trabajar con tablas en la estructuración de una web es un paso importante cuando se quiere


<div id="contenedor">

<div id="lateral">
<p>Aquí ira el contenido alineado a la izquierda</p>
</div>

<div id="principal">
<p>Aquí ira el contenido principal a lado del contenido o menú lateral</p>
</div>

</div>

Como viste existen 3 etiquetas que serviran para:

  • Contenedor - Determina el espacio de trabajo total.
  • Lateral - Ancho del lateral y su ubicación.
  • Principal - Ancho del contenido.

La propiedades que debén tener son:


#contenedor{
text-align: left;
width: 750px;
margin: auto;}

#lateral{
width: 180px;  /*Este será el ancho que tendrá tu columna*/
background-color: #CCCCCC;  /*Aquí pon el color del fondo que quieras para este lateral*/
float:left; /*Aqui determinas de lado quieres quede esta "columna" */
}

#principal{
margin-left:190px; /*Este margen hace que no se encime el contenido en tu menúlateral, es     importante que pongas un pocos pixeles más que el ancho  de tu columna lateral*/
background-color: #FFFFFF;
border:#000000 1px solid; /*ponemos un dorde para que se vea bonito*/
}

Artículos relacionados

  • Crear columnas con CSS
  • La creación de columnas sin tablas es uno de los primeros problemas...

  • FreshPress, tu blog igual al panel de administración
  • Wordpress se lavó la cara en la última versión 2.5, existen una...

  • Plantilla Blogy-Columnas
  • Esta plantilla esta basada en "columna" de Free CSS Templates, adaptada para...

Respuestas

Feed | Dirección de Trackback
  1. halı yıkama:

    Julio 19th, 2008 a las 9:33 am (#)

    thanks

  2. pablo:

    Octubre 6th, 2008 a las 6:36 am (#)

    lo haces ver tan simple. Que uno no deberia evitar el agradecerte

Deja tu comentario

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios no estén fuera tema, no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán eliminados. Recuerda que puedes usar nuestro foro para otros temas y preguntas.

  • Templates Blogger
  • Foro para Bloggers
  • Aplicaciones web 2.0

Categorías

  • Adsense
  • Blogandweb
  • Blogger
  • Blogs
  • Brushes
  • CSS
  • Diseño
  • Dominios
  • Firefox
  • Fuentes
  • Geek
  • HTML
  • Iconos
  • Javascript
  • Logos
  • México
  • Notas rápidas
  • Photoshop
  • PHP
  • Plantillas Blogger
  • Plugins
  • Productos Google
  • Recursos en linea
  • Red
  • SEO
  • Software
  • Themes
  • Tutoriales
  • Uncategorized
  • Web 2.0
  • Widgets para Blogger
  • Wordpress

Patrocinadores

  • Anúnciate aquí
  • Foros del Blog
  • Web a 2.0
  • BTemplates
  • Zona Chrome
  • Ser Turista
  • Blog ingeniería

Blogroll

  • Infected-FX
  • Blogmundi
  • Adseok
  • Zona Cerebral
  • Sigt
  • Loogic
  • Blog en serio
  • Isopixel
  • Vecindad Gráfica

Entradas Recientes

  • MisTatuajes, comparte tu tatuaje
  • Como agregar una sidebar en una plantilla Blogger
  • Trasladar la barra de estatus de Blogger al sidebar
  • Cómo poner banners de 125×125
  • Blogger y su sistema de seguidores

Comentarios Recientes

  • Jaime en Optimizar los títulos en Blogger
  • Julian en Pintando con Bob Ross en Photoshop
  • Bassofia en El lugar más seguro para hospedar las imágenes de tu plantilla blogger
  • Francisco en Como agregar una sidebar en una plantilla Blogger
  • Sebastian en Como agregar una sidebar en una plantilla Blogger

Archivos

  • Noviembre 2008
  • Octubre 2008
  • Septiembre 2008
  • Agosto 2008
  • Julio 2008
  • Junio 2008
  • Mayo 2008
  • Abril 2008
  • Marzo 2008
  • Febrero 2008
  • Enero 2008
  • Diciembre 2007
  • Noviembre 2007
  • Octubre 2007
  • Septiembre 2007
  • Agosto 2007
  • Julio 2007
  • Junio 2007
  • Mayo 2007
  • Abril 2007
  • Marzo 2007
  • Febrero 2007

©2008 Blog and Web - Bajo WordPress. Diseño basado en grindlite.
Condiciones de uso | Política de privacidad