CODEWITHSUNDEEP
htmlcss
Morten Riis
Morten Riis

Reputation: 43

Floating DIV's without vertical space

Is there a way to fix vertical space when floating DIV's with diffrent heights?

example:

<div class="container">
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=1" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x150&text=2" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=3" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=4" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=5" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x150&text=6" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=7" /></div>
    <div class="floatingGrid"><img src="http://placehold.it/100x100&text=8" /></div>
</div>
<style>
    .container { width: 312px; }
    .floatingGrid { float: left; margin: 2px; }
</style>

http://jsfiddle.net/ModuLIZER/gk1cjn1t/

In my case I don't care about the order just that element 5 and 6 is position directly under 1 and 2 without the space.

I should add this grid is responsive and I need to support IE9.

Upvotes: 1

Views: 293

Answers (2)

Awena
Awena

Reputation: 1022

Don't use float and use inline-blockwhat you are looking for is a masonry layout.

Have a look at this Fiddle

Upvotes: 0

Domenico
Domenico

Reputation: 82

I solved a similar problem creating floating columns and putting inside divs, this will simulate the grid layout i suppose you are looking for. 

<div class="container">
    <div class='column'>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=1" /></div>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=4" /></div>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=7" /></div>
    </div>
    <div class='column'>
      <div class="floatingGrid"><img src="http://placehold.it/100x150&text=2" /></div>
      <div class="floatingGrid"><img src="http://placehold.it/100x100&text=5" /></div>
      <div class="floatingGrid"><img src="http://placehold.it/100x100&text=8" /></div>
    </div>
    <div class='column'>
       <div class="floatingGrid"><img src="http://placehold.it/100x100&text=3" /></div>
       <div class="floatingGrid"><img src="http://placehold.it/100x150&text=6" /></div>
    </div>
</div>

<style>
    .container { width: 312px; }
    .column { width:104px; float:left;  }
    .floatingGrid { }
</style>

Alternatively, if you cant create columns, there are some javascript libraries can do it like for example http://masonry.desandro.com/.

Upvotes: 1

Related Questions