Comment bien float deux colonnes côte à côte avec les css

C'est une de ces choses que j'ai apprises il y a longtemps et jamais beaucoup réfléchi à si j'étais en train de faire le droit.

Disons que nous avons une structure comme ceci:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

Disons aussi que wrapper a une largeur de 600px.

Dois-je flotteur sideBar left, et mainContent right, ou dois-je les faire flotter les deux left?

En outre, si j'ai mis une largeur fixe pour sideBar comment puis-je faire mainContent remplir le reste de l'espace semblable à la façon d'une table fonctionne? Si j'ai mis mainContent à display:inline-block et width:100% il se déplace vers le bas sur la ligne suivante :/

Remarque: Dans mon scénario, je ne veux pas utiliser une table.

Ne les colonnes doivent être de même hauteur?
dans cet exemple, aucun.

OriginalL'auteur The Muffin Man | 2011-04-08

  1. 15

    Vous display:block avec float:left flotter divs uns à côté des autres.

    Vérifier exemple de travail à http://jsfiddle.net/FhL4u/2/

    De faire mainContent remplir reste de l'espace si seul le premier div largeur est connu, utiliser des pourcentages sur les deux barre latérale et mainContent ex: 20% à 80% au lieu d'utiliser une largeur fixe. sinon, vous aurez besoin d'une solution d'activer JavaScript pour parvenir à une compatibilité des navigateurs.

    Vérifier jQuery solution à http://jsfiddle.net/FhL4u/3/

    Semi-article connexe: blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block. Être prudent, car les anciens navigateurs (comme internet explorer 7 ou Firefox 2) ne gèrent pas les inline-block. Vous pouvez également juste flotter votre contenu et l'utilisation des milieux dans wrapper éléments pour la faire ressembler les colonnes sont d'égale hauteur.
    Pas besoin de inline-block. Vérifier la solution mise à jour jsfiddle.net/FhL4u/2
    Certains critique: vous n'avez pas besoin de jQuery (overkill..) pour ce faire, voir ma réponse. Aussi, chaque fois que vous utilisez display: inline-block, vous devriez au moins mentionner le fait qu'il ne fonctionne pas sous IE7 sans hacks (voir l'article lié par @Guttsy). Enfin, la première démo n'est pas (citation de question) "fill up the rest of the space similar to how a table works". Edit: Aussi, vous avez position:inline-block - fix pour display: inline-block.
    J'ai changé inline-bloc à bloc. Lire le commentaire ci-dessus.
    Je vois. Eh bien, vous pouvez modifier la première ligne de votre réponse, il est toujours en train de parler inline-block.

    OriginalL'auteur Hussein

  2. 6

    Je vais modifier ma réponse ici: Comment faire un inline-block élément remplissez le reste de la ligne?

    • Seulement #sideBar est flottant.
    • Vous ne pouvez pas vraiment tweak cette technique égale hauteur des colonnes plus tard, c'est pourquoi j'ai demandé avant de répondre. (eh bien, vous pouvez, mais vous devez utiliser un background-image pour faux colonnes)

    Voir: http://jsfiddle.net/qx32C/37/

    #wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

    Pourquoi n'ai-je remplacer margin-left: 100px par overflow: hidden à #mainContent?

    À la marge de gauche n'est pas une solution flexible.

    OriginalL'auteur thirtydot

  3. 1

    à l'aide du flotteur gauche ou de droite n'est pas important.
    vous avez wrapper avec la largeur de 600px.
    lorsque vous à l'aide du flotteur pour les deux barre latérale et de contenir à l'intérieur de l'emballage, vous devez vous assurer que la largeur de la barre latérale et contiennent (y compris la marge et le remplissage) est égale ou inférieure à 600px.
    Si pas, le second élément sera en dessous de la première.
    Espérons que cela aide ^^

    OriginalL'auteur Hatake Kakashi

  4. -1

    utilisation display:flex pour deux div flotteurs side-by-side

    #wrapper{
width: 600px;
display:flex;
}
#sideBar{
display:inline-flex;
width: 25%;
}
#mainContent{
width:75%;
flex:1;
}
    Pourquoi downvote?. Est-ce la solution fonctionne pas??
    +un pour compenser que downvote

    OriginalL'auteur Mike Tavish