web-dev-qa-db-fra.com

Comment créer deux colonnes sur une page Web?

Je veux avoir deux colonnes sur ma page Web. Pour moi, la façon la plus simple de le faire est d'utiliser une table:

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

J'aime cette solution car, tout d'abord, elle fonctionne (elle donne exactement ce que je veux), elle est aussi vraiment simple et stable (j'aurai toujours deux colonnes, quelle que soit la taille de ma fenêtre). Il est facile de contrôler la taille et la position de la table.

Cependant, je sais que les gens n'aiment pas la disposition des tableaux et, pour autant que je sache, ils utilisent plutôt div et css. Je voudrais donc également essayer cette approche. Quelqu'un peut-il m'aider avec ça?

Je voudrais avoir une solution simple (sans astuces) facile à retenir. Il doit également être stable (afin qu'il ne se produise pas accidentellement qu'une colonne se trouve sous une autre ou qu'elles se chevauchent ou quelque chose comme ça).

htmlcsshtml-table
14
Roman

je recommande de regarder cet article

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

voir 4. Placez les colonnes côte à côte spécial

Pour que les deux colonnes (#main et #sidebar) s'affichent côte à côte, nous les flottons , une à la gauche et l'autre à droite . Nous spécifions également les largeurs des colonnes.

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

Notez que la somme des largeurs doit être égale à la largeur donnée à #wrap à l'étape 3.

10
Haim Evgi

Je suis d'accord avec @haha sur celui-ci, pour la plupart. Mais il existe plusieurs problèmes liés à plusieurs navigateurs liés à l'utilisation du "float: right" et pourrait finalement vous donner plus de maux de tête que vous ne le souhaitez. Si vous savez quelles seront les largeurs pour chaque colonne, utilisez un flotteur: laissez-les sur les deux et évitez les ennuis. Une autre chose que vous pouvez intégrer dans votre méthodologie est de créer des classes de colonnes dans votre CSS.

Essayez donc quelque chose comme ceci:

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>
3
PseudoNinja

Fondamentalement, vous avez besoin de 3 divs. D'abord comme wrapper, ensuite comme left et troisième comme right.

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

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

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

Exemple comment faire 2 colonnes http://jsfiddle.net/huhu/HDGvN/

CSS Cheat Sheet pour référence

1
haha

J'ai trouvé une vraie grille sympa que j'utilise aussi pour les colonnes. Vérifiez-le Simple Grid . Avec ce CSS, vous pouvez simplement utiliser:

<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>

Je l'utilise pour tous mes projets.

1
CTSchmidt