Comment placer div côte à côte

J'ai une div enveloppe principale qui est définie à 100% de largeur. À l'intérieur, j'aimerais avoir deux divisions, une à largeur fixe et l'autre qui remplit le reste de l'espace. Comment faire flotter le deuxième div pour remplir le reste de l'espace. Merci pour toute aide.

Il y a plusieurs façons de faire ce que vous demandez:

1. Utilisation de la propriété CSSfloat :

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

2. Utilisation de la propriété CSSdisplay - qui peut être utilisée pour faire 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 existe plus de méthodes, mais ces deux-là sont les plus populaires.

CSS3 a introduit des boîtes flexibles (alias. Boîte flexible) qui peuvent également obtenir ce comportement.

Définissez simplement la largeur du premier div, puis donnez au second une flex-growvaleur 1qui lui permettra de remplir la largeur restante du 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>

Démo jsFiddle

Notez que les boîtes flexibles ne sont pas rétrocompatibles avec les anciens navigateurs, mais sont une excellente option pour cibler les navigateurs modernes (voir également Caniuse et MDN ). Un excellent guide complet sur la façon d'utiliser les boîtes flexibles est disponible sur CSS Tricks .

Je ne sais pas grand-chose sur les stratégies de conception HTML et CSS, mais si vous cherchez quelque chose de simple et qui s'adaptera automatiquement à l'écran (comme je le suis), je pense que la solution la plus simple consiste à faire en sorte que les divs se comportent comme des mots dans un paragraphe. Essayez de spécifierdisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Vous pourriez ou non avoir besoin de spécifier la largeur des DIVs

Vous pouvez utiliser la grille CSS pour y parvenir, ceci est la version longue à des fins d'illustration:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Ou la méthode plus traditionnelle utilisant le flottant et la marge.

J'ai inclus une couleur d'arrière-plan dans cet exemple pour aider à montrer où les choses se trouvent - et aussi quoi faire avec le contenu sous la zone flottante.

Ne mettez pas vos styles en ligne dans la vraie vie, extrayez-les dans une feuille de style.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

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

Donnez au premier div un flotteur à gauche et fixe avec, le deuxième div à 100% de largeur un flotteur à gauche. Cela devrait faire l'affaire. Si vous souhaitez placer des éléments en dessous, vous avez besoin d'un clair: à la fois sur l'élément que vous souhaitez placer en dessous

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Ce sera compatible avec tous les navigateurs. Sans la marge de gauche, vous rencontrerez des problèmes avec le contenu s'exécutant complètement à gauche si votre contenu est plus long que votre barre latérale.

Si vous ne taggez pas IE6, faites flotter le second <div>et donnez-lui une marge égale (ou peut-être un peu plus grande) à la <div>largeur fixe du premier .

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

La marge tient compte de la possibilité que le «reste d'espace» <div>puisse contenir plus de contenu que la «largeur fixe» <div>.

Ne donnez pas de fond à la largeur fixe; si vous avez besoin de les voir visiblement comme des «colonnes» différentes, utilisez l' astuce Faux colonnes .