How to position one div under another with varying sizes?

Question

I have the following situation: I search the database results and display them this way

<div style='background-color:#fff;width:260px; margin-left:5px;margin-top:5px;float:left;'> texto </div>

I will show with image to facilitate

my doubt and how to position it so it stays this way, already tried display:Cell and clear:Both without result

the end result would be this

Answer 1

Stacking Divs this way (similar to Pinterest) is not possible with CSS alone. There is a library to allow exactly this type of behavior that you seek, Masonry.

Check here the list of methods library.

Answer 2

If you change your logic to split the database fields into columns you can implement the following:

JSFIDDLE

CSS:

#left {
  float:left;
  width:220px;
}
#teste {
  border: 1px solid;
  background-color:#a3a2f1;
  width:200px;
  margin-left:5px;
  margin-top:5px;
  float:left;
  padding: 4px;
}

HTML:

<div id="left">
  <div id="teste">texto</div>
  <div id="teste">texto
    <br>texto
    <br>texto
    <br>
  </div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
</div>
<div id="left">
  <div id="teste">texto
    <br>texto
    <br>texto
    <br>
  </div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
</div>
<div id="left">
  <div id="teste">texto</div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
  <div id="teste">texto
    <br>texto
    <br>texto
    <br>
  </div>    
  <div id="teste">texto</div>        
</div>