HTML Box de informações em HTML + CSS

[mathiasdataamerica]

Oi, pessoal!

Estou com dúvida de como poderia construir um box de informações em HTML e CSS.

Acredito que seriam 3 colunas, sendo que na primeira coluna é dividido em duas linhas.

Aqui seria uma representação do que eu gostaria de fazer.

[DiF]

@mathiasdataamerica Não é muito complicado fazer.

 

Basicamente você terá um elemento como contêiner, um outro elemento para separar em dois o primeiro contêiner.

Dentro do primeiro elemento você cria mais dois a nível de bloco para que fique um em cima do outro.

 

exemplo:

 

<div id="conteiner">
    <section id="conteiner-esquerdo">
        <section class="box top"> texto do box de cima</section>
        <section class="box bottom">texto do box de baixo</section>
    </section>
    <section id="conteiner-direito">teste</section>
</div>

Veja funcionando: https://jsfiddle.net/dife/jvrLq36f/15/

 

[mathiasdataamerica]

@DiF ah entendi! só que a minha coluna da direita está fincando para baixo, saberia me dizer o motivo. olhei as sections e parece estar certo.

 

https://jsfiddle.net/r6h5k1xm/

[mathiasdataamerica]

Consegui usando o teu codigo e usando o grid-columns:

      #conteiner{
        width: 600px;
        height: 300px;
        background: red;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
      }
      
      #conteiner-esquerdo{
        width: 150px;
        float: left;
        height: 300px;
        background: yellow;
      }
      
      #conteiner-meio{
        width: 250px;
        height: 300px;
        background: chocolate;
      }

      #conteiner-direito{
        width: 200px;
        height: 300px;
        background: green;
      }
      
      .box{
        width: 150px;
        height: 150px;
        display: block;
      }
      
      .top{
        background: blue;
      }
      
      .bottom{
        background: gray;
      }
    </style>
      <div id="conteiner">
          <section id="conteiner-esquerdo">
              <section class="box top"> texto do box de cima</section>
              <section class="box bottom">texto do box de baixo</section>
          </section>
          <section id="conteiner-meio">teste meio</section>
          <section id="conteiner-direito">teste direito</section>
      </div>

Resolvido!