Maquetar tres columnas utilizando css

De Wikilibros, la colección de libros de texto de contenido libre.

Icono listas.png

Este libro usa una convención de nombrado inapropiada y sus capítulos se deberían renombrar. Lee Manual de estilo y Política de nombrado para más detalles.
Por favor, usa la función de trasladar para renombrar los capítulos y modifica esta página para enlazar directamente a los nuevos nombres.

[editar] Descripción de la situación

Suele ser habitual querer maquetar una página web con tres columnas. Las columnas izquierda y derecha se suelen usar para menús, enlaces, anuncios y otras cosas. Y la central suele ser el cuerpo de la página.

Maquetar las tres columnas de manera correcta utilizando CSS puede llegar a ser una tarea peliaguda. Aún más si queremos que las tres columnas tengan la longitud de la más larga, por ejemplo para poner un pie de página debajo o para poner un fondo a cada una.

[editar] Solución propuesta

A continuación se presenta una propuesta de código que consigue maquetar la situación mencionada:

  <html>
  <head>
  <title>Columnas variables de igual altura con div y CSS</title>
  <style type="text/css">
  #container{
      width:800px;
      margin: 0 auto;
      overflow:hidden;
  }
  #column1{
      width:20%;
      float:left;
      margin-bottom: -20000px;
      padding-bottom: 20000px;
      background: #4B69A1;
  }
  #column2{
      width:60%;
      float:left;
      margin-bottom: -20000px;
      padding-bottom: 20000px;
      background: #7B99E1;
  }
  #column3{
      width:20%;
      float:left;
      margin-bottom: -20000px;
      padding-bottom: 20000px;
      background: #ABC9F1;
  }
  </style>
  </head>
  <body>

          Texto de columna 1. 

          Texto de columna 2. 

          Texto de columna 3. 

  </body>
  </html>
Obtenido de "http://es.wikibooks.org/wiki/Maquetar_tres_columnas_utilizando_css"
Herramientas personales