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

Voici la solution :

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

votre démo mise à jour ;

http://jsfiddle.net/dqC8t/1/

Answer 2

C'est la bonne réponse CSS3. J'espère que cela vous aidera un peu maintenant :D Je vous recommande vraiment de lire le livre : https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 En fait, j'ai trouvé cette solution en lisant ce livre. :D

#wrapper{
  display: flex;
  flex-direction: row;
  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>

Answer 3

C'est très facile - vous pouvez le faire de la manière forte

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

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

ou le moyen le plus simple

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    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>

Il y a aussi un million d'autres façons.
Mais j'ai choisi la solution de facilité. Je voudrais aussi vous dire que beaucoup de réponses sont incorrectes. Mais les deux méthodes que j'ai montrées fonctionnent au moins en HTML 5.

Answer 4

Essayez d'utiliser les changements de code ci-dessous pour placer deux divs l'un devant l'autre

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

Lien vers JSFiddle

Answer 5

1. Ajouter float:left; dans les deux divs.

2. Ajouter display:inline-block; propriété.

3. Ajouter display:flex; dans la division parent.