0

New member approaching.

I'm new at HTML and CSS. I'm a designer and i got amazed by HTML and CSS, i'm studying methods of position elements inside a div. And recently I came across some problems. I was trying to make the elements fit the spaces above, but it seems like there's a line dividing the two parts of the blocks. Here's an image to illustrate what I'm experiencing.

Problem

My markup is:

<section style="max-width:470px; background-color:green;">

<div class="bloco1">
    hello
</div>

<div class="bloco2">
    hi
</div>

<div class="bloco3">
    hey
</div>

<div class="bloco3">
    I want this elements to fit those spaces above
</div>

<div class="bloco1">
    I want this elements to fit those spaces above
</div>

<div class="bloco2">
    I want this elements to fit those spaces above
</div>

And CSS is:

     .block1 {
 display:inline-block;
  width:150px;
  height:200px;
  background-color:gray;
 }

 .block2 {
  display:inline-block;
  width:150px;
  height:100px;
  background-color:yellow;
 }

  .block3 {
  display:inline-block;
  width:150px;
  height:180px;
  background-color:blue;
 }

So, I've tried to mess with position but it didn't served well. What should i do?

William Oliveira
  • 1
  • 1
  • The CSS has .block1 and HTML is calling "bloco1" but that was a modification i made and didn't changed in the question. Sorry bout that. In the markup is calling the correct classes and stuff. – William Oliveira Apr 20 '18 at 16:46
  • what do you mean trying to make the elements fit the spaces above?? what element? Above ? try to use class names or tags – Adam Apr 20 '18 at 17:54
  • As I said, i've just started learning HTML and CSS, so probably don't know the right names to use in that case. What I mean by "fit", is that the second .block1 stays in a kind of row, but if you look at the image I've posted, you'll notice that there's available space (background green) above. But the Div don't go up, it stays in the second row. Don't know if got any clear. Sorry. – William Oliveira Apr 20 '18 at 20:15
  • Possible duplicate of [Is it possible for flex items to align tightly to the items above them?](https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them) – Adam Apr 20 '18 at 20:20
  • You need to use something like this Desandro Masonry or CSS Grid Layout [https://masonry.desandro.com/] – Adam Apr 20 '18 at 20:23

0 Answers0