Comment placer div côte à côte

Question

J'ai un principal wrapper div qui est situé à 100% de largeur. À l'intérieur que je voudrais avoir deux divs, d'une largeur fixe et l'autre qui remplit le reste de l'espace. Comment puis-je faire flotter le deuxième div pour remplir le reste de l'espace. Merci pour toute aide.

Answer 1

Il existe de nombreuses façons de faire ce que vous demandez:

1. À l'aide de CSS float de la propriété:

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>
   

2. À l'aide de CSS display de la propriété - qui peut être utilisé pour fabriquer divs agir comme un table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>
   

Il y a plusieurs méthodes, mais ces deux sont les plus populaires.

Answer 2

HTML5 a introduit flexible boîtes (aka. flex zone) qui peut également obtenir ce comportement.

On pourrait définir simplement la largeur fixe pour le premier div, et de donner ensuite la deuxième un flex-grow style de 1 , de sorte qu'il s'adapte à la largeur restante de la div parent.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle démo

Il convient de noter que ce n'est pas rétro-compatible avec les anciens navigateurs, mais c'est une bonne option pour cibler les navigateurs modernes. Un excellent guide complet sur flex boîtes sont disponibles sur CSS Astuces.

Answer 3

J'ai inclus un fond de couleur dans cet exemple pour vous aider à voir où en sont les choses et aussi de quoi faire avec le contenu ci-dessous la flottait de la zone.

Ne mettez pas vos styles inline dans la vraie vie, les extraire dans une feuille de style.

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style=clear: both;">Below</div>

Answer 4

Donner la première div float à gauche et fixe, le deuxième div 100% de la largeur d'un flotteur gauche. Cela devrait faire l'affaire. Si vous voulez placer les éléments ci-dessous, il vous avez besoin d'un clear:both sur l'élément que vous souhaitez placer en dessous

Answer 5

Si vous n'êtes pas tagetting IE6, flottent alors le deuxième <div> et de lui donner une marge égale à (ou peut-être un peu plus grand que) le premier <div>s'de largeur fixe.

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Les comptes sur marge, la possibilité, pour le repos de "l'espace- <div> peut contenir plus de contenu que la "largeur fixe' <div>.

Ne pas donner la largeur fixe un arrière-plan; si vous avez besoin de voir visiblement ces que les différentes colonnes", puis utiliser le Faux Colonnes truc.