Como colocar uma div ao lado de outra?

Front-end
, , ,
#1

tenho o seguinte código html:

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

e o seguinte código css:

div {
    width: 100px;
    height: 100px;
    display: inline-block;
}
#div1 {
    background-color: blueviolet;
}
#div2 {
    background-color: maroon;
}

as duas divs ficam uma ao lado da outra, mas quando eu coloco essas duas divs dentro de outra div, essa funcionalidade(inline-block) não funciona.

Gostaria de fazer um card principal para um site de noticias, onde teria uma foto e ao lado da foto o titulo, começo do texto etc… Como nos sites de notícias.
exemplo do site que quero: https://physics.aps.org/

#2

Você definiu todas as DIVs da sua página com o tamanho de 100px de largura e altura! Lembre-se, a configuração logo abaixo afeta todas as DIVs, inclusive a que você usará para envolver as duas DIVs coloridas!

div {
    width: 100px;
    height: 100px;
    display: inline-block;
}

Como você esperava comportar duas DIVs de 100px cada (o que dá 200px ainda somados aos valores das margens) em uma única DIV de 100px?

Consertei seu código. Peguei a sua configuração, joguei-a numa classe e usei essa classe apenas nas DIVs coloridas.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        #div1 {
            background-color: blueviolet;
        }
        #div2 {
            background-color: maroon;
        }
    </style>
  </head>
  <body>
      <div>
          <div class="box" id="div1"></div>
          <div class="box" id="div2"></div>
      </div>
  </body>
</html>

Qualquer dúvida pode me perguntar.

1 curtida