How to position one div under another of varying sizes?

Question

How to position one div under another of varying sizes?

Navigation

#1 by (2 votes)
#2 by (2 votes)

4

I have the following situation: I search the results database 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

Myquestionandhowtopositionitsoitlookslikethis,I'vealreadytrieddisplay:cellandclear:bothwithnoresult

theendresultwouldbethis

html css

asked by anonymous 10.06.2014 / 03:39

2 answers

How do I remove bookmarks from a map with the v3 API? Error failed: No space left on device

score 2 · Answer 1

If you change your logic to divide the bank's 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>

score 2 · Answer 2

Having the divs stacked in this way (similar to Pinterest) is not only possible with CSS. There is a library to allow exactly this type of behavior you are looking for, Masonry .

Check here the list of methods in the library.