Comment placer deux divs l'un à côté de l'autre ?

Question

Considérez le code suivant :

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

J'aimerais que les deux divisions se trouvent l'une à côté de l'autre à l'intérieur de la division enveloppe. Dans ce cas, la hauteur de la division verte doit déterminer la hauteur du wrapper.

Comment puis-je réaliser cela via CSS ?

Answer 1

Faites flotter une ou les deux divs intérieures.

Une div flottante :

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

ou si vous faites flotter les deux, vous devrez encourager le div wrapper à contenir les deux enfants flottants, sinon il pensera qu'il est vide et ne mettra pas la bordure autour d'eux.

Flottant les deux divs :

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

Answer 2

Avoir deux divs,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

vous pourriez également utiliser le display propriété :

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Exemple de jsFiddle ici .

Si div1 dépasse une certaine hauteur, div2 sera placé à côté de div1 en bas. Pour résoudre ce problème, utilisez vertical-align:top; sur div2 .

Exemple de jsFiddle ici .

Answer 3

Vous pouvez placer des éléments les uns à côté des autres en utilisant la propriété CSS float :

#first {
float: left;
}
#second {
float: left;
}

Vous devez vous assurer que la div d'habillage permet le flottement en termes de largeur, et que les marges, etc. sont correctement définies.

Answer 4

Essayez d'utiliser le modèle flexbox. Il est facile et court à écrire.

En direct Jsfiddle

CSS :

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

La direction par défaut est la ligne. Ainsi, ils s'alignent les uns à côté des autres à l'intérieur du #wrapper. Mais ce n'est pas supporté par IE9 ou les versions inférieures.

Answer 5

Option 1

Utilisez float:left sur les deux div et définissez une largeur de % pour les deux éléments div avec une largeur totale combinée de 100 %.

Utilisez box-sizing: border-box; sur les éléments div flottants. La valeur border-box force le remplissage et les bordures dans la largeur et la hauteur au lieu de les étendre.

Utilisez clearfix sur le <div id="wrapper"> pour effacer les éléments enfants flottants, ce qui permettra de mettre à l'échelle la div wrapper à la hauteur correcte.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

Option 2

Utilisez position:absolute sur un élément et une largeur fixe sur l'autre élément.

Ajouter position:relative à <div id="wrapper"> pour que les éléments enfants soient absolument positionnés par rapport à l'élément <div id="wrapper"> élément.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Option 3

Utilisez display:inline-block sur les deux div et définissez une largeur de % pour les deux éléments div avec une largeur totale combinée de 100 %.

Et encore (comme float:left exemple) utiliser box-sizing: border-box; sur les éléments div. La valeur border-box force le remplissage et les bordures dans la largeur et la hauteur au lieu de les étendre.

NOTE : Les éléments inline-block peuvent avoir des problèmes d'espacement car ils sont affectés par les espaces dans le balisage HTML. Plus d'informations ici : https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

Une dernière option serait d'utiliser la nouvelle option d'affichage appelée flex, mais notez que la compatibilité des navigateurs peut entrer en jeu :

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html