Mise en page html simple à deux colonnes sans utiliser de tableaux

Question

Je cherche une méthode très simple pour créer un format à deux colonnes afin d'afficher des données sur une page Web. Comment puis-je obtenir le même format que :

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

Je suis également ouvert aux techniques HTML5 / CSS3.

Answer 1

<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Assurez-vous que la somme des largeurs des colonnes est égale à la largeur de l'enveloppe. Vous pouvez également utiliser des valeurs en pourcentage pour la largeur.

Pour plus d'informations sur les techniques de mise en page de base à l'aide de CSS, consultez le site suivant tutoriel

Answer 2

Eh bien, vous pouvez utiliser des tableaux css au lieu de tableaux html. Cela permet de conserver la sémantique de votre code html, mais vous permet d'utiliser des tableaux pour la mise en page.

Cela semble plus logique que d'utiliser des bidouillages de flotteurs.

    #content-wrapper{
      display:table;
    }

    #content{
      display:table-row;
    }

    #content>div{
      display:table-cell
    }

    /*adding some extras for demo purposes*/
    #content-wrapper{
      width:100%;
      height:100%;
      top:0px;
      left:0px;
      position:absolute;
    }
    #nav{
      width:100px;
      background:yellow;
    }
    #body{
      background:blue;
    }

<div id="content-wrapper">
  <div id="content">
    <div id="nav">
      Left hand content
    </div>
    <div id="body">
      Right hand content
    </div>
  </div>
</div>

Answer 3

Je sais que la réponse à cette question a déjà été donnée, mais ayant traité la mise en page un peu, je voulais ajouter une réponse alternative qui résout quelques problèmes traditionnels avec les éléments flottants...

Vous pouvez voir l'exemple mis à jour en action ici.

http://jsfiddle.net/Sohnee/EMaDB/1/

Que vous utilisiez HTML 4.01 ou HTML5 avec des éléments sémantiques, cela ne fait aucune différence (vous devrez déclarer les conteneurs gauche et droit comme display:block s'ils ne le sont pas déjà).

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

Il existe également un ajout assez intéressant (bien que plus récent) au CSS qui vous permet de disposer le contenu en colonnes sans avoir à jouer avec les divs :

column-count: 2;

Answer 4

Eh bien, si vous voulez le super facile il suffit de mettre

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

mais il se peut que vous ayez besoin de plus que cela en fonction des autres exigences de mise en page que vous avez.

Answer 5

Si vous voulez le faire à la manière de HTML5 (ce code particulier fonctionne mieux pour des choses comme des blogs, où <article> est utilisé plusieurs fois, une fois pour chaque accroche d'article de blog ; en fin de compte, les éléments eux-mêmes n'ont pas beaucoup d'importance, c'est le style et le placement des éléments qui vous permettront d'obtenir les résultats souhaités) :

<style type="text/css">
article {
  float: left;
  width: 500px;
}

aside {
  float: right;
  width: 200px;
}

#wrap {
  width: 700px;
  margin: 0 auto;
}
</style>

<div id="wrap">
  <article>
     Main content here
  </article>
  <aside>
     Sidebar stuff here
  </aside>
</div>