Como colocar dois divs próximos um do outro?

Considere o seguinte código :

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

Gostaria que as duas divs estivessem próximas uma da outra dentro da div do wrapper. Nesse caso, a altura da div verde deve determinar a altura do invólucro.

Como eu consegui isso via CSS?

Flutue um ou ambos os divs internos.

Flutuando uma div:

#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, se você flutuar os dois, precisará incentivar a div do wrapper a conter os dois filhos flutuados, ou ele achará que está vazio e não colocará a borda ao redor deles

Flutuando ambas as 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 */
}

Tendo dois divs,

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

você também pode usar a displaypropriedade:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Exemplo de jsFiddle aqui .

Se div1exceder uma certa altura, div2será colocado próximo à div1parte inferior. Para resolver isso, use vertical-align:top;on div2.

Exemplo de jsFiddle aqui .

Você pode sentar elementos próximos um do outro usando a propriedade float CSS:

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

Você precisaria se certificar de que a div do wrapper permita a flutuação em termos de largura, e as margens etc estejam definidas corretamente.

Tente usar o modelo flexbox. É fácil e curto de escrever.

Live Jsfiddle

CSS:

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

direção padrão é linha. Assim, alinha-se um ao lado do outro dentro do #wrapper. Mas não há suporte para o IE9 ou menos que as versões

aqui está a solução:

#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*/
}

sua demo atualizada;

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

Opção 1

Use float:leftnos doisdivelementos e defina uma% de largura para os dois elementos div com uma largura total combinada de 100%.

Usar box-sizing: border-box; nos elementos div flutuantes. O valor border-box força o preenchimento e as bordas na largura e altura, em vez de expandi-lo.

Use clearfix no <div id="wrapper">para limpar os elementos filho flutuantes que farão com que a div do wrapper seja dimensionada para a altura correta.

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

opção 2

Usar position:absolute em um elemento e uma largura fixa no outro elemento.

Adicionar posição: relativo ao <div id="wrapper">elemento para fazer com que os elementos filhos se posicionem absolutamente no <div id="wrapper">elemento.

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

Opção 3

Use display:inline-blocknos dois divelementos e defina uma% de largura para os dois elementos div com uma largura total combinada de 100%.

E novamente (igual ao float:leftexemplo) use box-sizing: border-box;nos elementos div. O valor border-box força o preenchimento e as bordas na largura e altura, em vez de expandi-lo.

NOTA: os elementos de bloco embutido podem ter problemas de espaçamento, pois são afetados por espaços na marcação HTML. Mais informações aqui: 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/

Uma opção final seria usar a nova opção de exibição denominada flex, mas observe que a compatibilidade do navegador pode entrar em ação:

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

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

Tente usar as alterações de código abaixo para colocar duas divs uma na frente da outra

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

Link JSFiddle

É muito fácil - você pode fazer da maneira mais difícil

.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 a maneira mais fácil

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

Também existem milhões de outras maneiras.
Mas eu apenas com o caminho mais fácil. Também gostaria de dizer que muitas das respostas aqui estão incorretas. Mas as duas maneiras que mostrei pelo menos funcionam no HTML 5.

Esta é a resposta CSS3 correta. Espero que isso ajude você de alguma forma agora: D Eu realmente recomendo que você leia o livro: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Na verdade, eu fiz essa solução ao ler este livro agora . : 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>

1. Adicione float:left;propriedade em ambas as divs.

2. Adicione display:inline-block;propriedade.

3. Adicione display:flex;propriedade na div pai.

Minha abordagem:

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

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

Na interface do usuário do material e react.js, você pode usar a grade

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>