¿Cómo crear dos columnas en una página web?

Question

Quiero tener dos columnas en mi página web. Para mí la forma simples de hacerlo es utilizar una tabla:

<table> 
    <tr> 
     <td> 
     Content of the first column. 
     </td> 
     <td> 
     Content of the second column. 
     </td> 
    </tr> 
</table> 

me gusta esta solución porque, en primer lugar, funciona (que da exactamente lo que quiero), también es muy simple y estable (Siempre tendré dos columnas, sin importar qué tan grande sea mi ventana). Es fácil controlar el tamaño y la posición de la mesa.

Sin embargo, sé que a las personas no les gusta el diseño de la tabla y, hasta donde yo sé, utilizan div y css en su lugar. Por lo tanto, me gustaría probar este enfoque. ¿Alguien me puede ayudar con eso?

Me gustaría tener una solución simple (sin trucos) que sea fácil de recordar. También necesita ser estable (para que no ocurra accidentalmente que una columna esté debajo de otra o se superponen o algo así).

Answer 1

i recomiendan mirar este artículo

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

ver 4. Coloque el lado a lado columnas especial

Para hacer las dos columnas (#main y #sidebar) por el lado de la pantalla lado nos flotarlos, uno a la izquierda y el otro a la derecha. También especificamos el ancho de las columnas.

#main { 
    float:left; 
    width:500px; 
    background:#9c9; 
    } 
    #sidebar { 
    float:right; 
    width:250px; 
    background:#c9c; 
    } 

Obsérvese que la suma de las anchuras debe ser igual a la anchura dada a #wrap en el Paso 3.

Answer 2

El sencillo y mejor solución es el uso de tablas para los diseños. Lo estás haciendo bien. Hay una serie de razones por las cuales las tablas son mejores.

• Se obtienen mejores resultados que CSS
• Trabajan en todos los navegadores sin ninguna queja
• Se puede depurar fácilmente con la frontera = 1 atributo

Answer 3

Básicamente se necesitan 3 divs. Primero como wrapper, segundo como left y tercero como right.

.wrapper { 
width:500px; 
overflow:hidden; 
} 

.left { 
width:250px; 
float:left; 
} 

.right { 
width:250px; 
float:right; 
} 

Ejemplo de cómo hacer 2 columnas http://jsfiddle.net/huhu/HDGvN/

---

CSS Cheat Sheet para referencia

Answer 4

Estoy de acuerdo con @haha en este caso, en su mayor parte. Pero hay varios problemas relacionados con el uso del "flotador: correcto" en el navegador y, en última instancia, podrían ocasionarle más dolores de cabeza de los que desea. Si sabe cuál será el ancho de cada columna, use un flotador: a la izquierda en ambos y ahórrese el problema. Otra cosa que puedes incorporar a tu metodología es construir clases de columna en tu CSS.

Así que trate de algo como esto:

CSS

.col-wrapper{width:960px; margin:0 auto;} 
.col{margin:0 10px; float:left; display:inline;} 
.col-670{width:670px;} 
.col-250{width:250px;} 

HTML

<div class="col-wrapper"> 
    <div class="col col-670">[Page Content]</div> 
    <div class="col col-250">[Page Sidebar]</div> 
</div> 

Answer 5

he encontrado un verdadero cuadrícula fresco que también lo uso para las columnas. Verifique Simple Grid. Que este CSS puede usar simplemente:

<div class="grid"> 
    <div class="col-1-2"> 
     <div class="content"> 
      <p>...insert content left side...</p> 
     </div> 
    </div> 
    <div class="col-1-2"> 
     <div class="content"> 
      <p>...insert content right side...</p> 
     </div> 
    </div> 
</div> 

Lo uso para todos mis proyectos.