Question

I would like to make in sort that floats with different height goes under each other.

Here’s my code

CSS

#page .equipeBox{
    float:left;
    width:280px;
    padding:10px;
    margin:10px;
    background:#fff;
}

HTML

<div id="page">
  <div style="font-size:40px">****</div>
  <hr />
  <div>
    <div class="equipeBox">Box 1<br>Bresaola corned beef pork shoulder, tri-tip drumstick venison short loin t-bone pastrami turkey swine strip steak biltong. Brisket andouille ham shankle. Strip steak tail spare ribs boudin pork chop, rump beef. Ground round fatback brisket, shoulder corned beef short loin ball tip shank. Turkey sirloin salami beef ribs ribeye. Meatloaf beef ribs chuck, ribeye tail shankle pork chop drumstick rump pork loin sausage bresaola. Bresaola venison pork chop, turkey chuck ham boudin beef drumstick.</div>
    <div class="equipeBox">Box 2<br>Bresaola corned beef pork shoulder, tri-tip drumstick venison short loin t-bone pastrami turkey swine strip steak biltong. Brisket andouille ham shankle. Strip steak tail spare ribs boudin pork chop, rump beef. Ground round fatback brisket, shoulder corned beef short loin ball tip shank. Turkey sirloin salami beef ribs ribeye. Meatloaf beef ribs chuck, ribeye tail shankle pork chop drumstick rump pork loin sausage bresaola. Bresaola venison pork chop, turkey chuck ham boudin beef drumstick.

Turkey jowl tri-tip pig, ribeye meatball pancetta. Cow bresaola fatback, andouille shankle ham hock jerky bacon. Pork chop fatback pastrami corned beef. Shankle rump ground round brisket, andouille venison ball tip swine pork corned beef pig pork loin bacon tongue pancetta. Hamburger sausage pastrami, strip steak chicken drumstick ham beef ribs corned beef swine. Bresaola fatback pork, swine sirloin t-bone bacon meatloaf turkey jerky. Venison salami beef ribs, fatback tail spare ribs sirloin pork tri-tip short loin swine cow.</div>
    <div class="equipeBox">Box 3<br>andouille shankle ham hock jerky bacon. Pork chop fatback pastrami corned beef. Shankle rump ground round brisket, andouille venison ball tip swine pork corned beef pig pork loin bacon tongue pancetta. Hamburger sausage pastrami, strip steak chicken drumstick ham beef ribs corned beef swine. Bresaola fatback pork, swine sirloin t-bone bacon meatloaf turkey jerky. Venison salami beef ribs, fatback tail spare ribs sirloin pork tri-tip short loin swine cow.</div>
    <div class="equipeBox">Box 4<br>Bresaola corned beef pork shoulder, tri-tip drumstick venison short loin t-bone pastrami turkey swine strip steak biltong. Brisket andouille ham shankle. Strip steak tail spare ribs boudin pork chop, rump beef. Ground round fatback brisket, shoulder corned beef short loin ball tip shank. Turkey sirloin salami beef ribs ribeye. Meatloaf beef ribs chuck, ribeye tail shankle pork chop drumstick rump pork loin sausage bresaola. Bresaola venison pork chop, turkey chuck ham boudin beef drumstick.

Turkey jowl tri-tip pig, ribeye meatball pancetta. Cow bresaola fatback, andouille shankle ham hock jerky bacon. Pork chop fatback pastrami corned beef. Shankle rump ground round brisket, andouille venison ball tip swine pork corned beef pig pork loin bacon tongue pancetta. Hamburger sausage pastrami, strip steak chicken drumstick ham beef ribs corned beef swine. Bresaola fatback pork, swine sirloin t-bone bacon meatloaf turkey jerky. Venison salami beef ribs, fatback tail spare ribs sirloin pork tri-tip short loin swine cow.

Swine beef ribs shank short ribs, sausage biltong t-bone venison. Short loin shank salami beef ribs. T-bone ball tip swine, meatloaf corned beef pork chop shankle shoulder tail short ribs bacon andouille jerky flank turkey. Andouille ball tip bresaola boudin beef ribs ground round. T-bone bresaola pastrami cow jowl meatball. Corned beef tongue t-bone, meatball chicken beef ribs flank biltong. Spare ribs pig short loin meatloaf, tri-tip jowl beef.</div>
    <div class="clear"></div>
  </div>
</div>

Which gives

So is it possible that the “Box 4” go under the Box 1 and fill the space left, and if there was a Box 5 go under Box 2, etc… ? Just like Tetris 😀

EDIT

Please note that there will be alot more boxes, not just 4 or 5, so I need a CSS solitions that everytime I call that class, it will imbricate it.

EDIT 2
Ok now using Masonry.js, it’s they way I want to why their’s so much space in the position top on each other. Look a the image. I need them much closer to each other like they show on their website.

I’m using this function

$('#equipe').masonry({
    itemSelector: '.equipeBox'
  });

Answer 1

Check out Masonary.js or this tutorial here.