0

I have many float items with different heights inside one container.
I want that the items will fill the container without any spaces (white areas) but it's not working for me.

I have the code on the Fiddle below:

https://jsfiddle.net/bhvgctsm/1/

body {
   width : 400px;
}

.div100 {
    float: right;
    height : 60px;
    width :48%;
    background-color : red;
    border : 1px solid black;
}
.div200 {
    float: right;
    height : 100px;
    width :48%;
    background-color : blue;
        border : 1px solid black;
}

.left {
    float : left;
    width : 48%;
}
<body>
    <div class="left">
        <div class="div100"></div>
        <div class="div200"></div>
        <div class="div200"></div>
        <div class="div100"></div>
        <div class="div200"></div>
    </div>
</body>
cassiomolin
  • 124,154
  • 35
  • 280
  • 359
mashiah
  • 109
  • 2
  • 11
  • This type of question comes up often in SO (but hard to locate using search terms). The most common answer to this problem is to use the jQuery plugin Masonry: http://masonry.desandro.com/ – Marc Audet Sep 06 '15 at 14:57
  • Better: https://jsfiddle.net/bhvgctsm/8/ ? – loveNoHate Sep 06 '15 at 15:09
  • Someone closed this before it could give an answer check this one out https://jsfiddle.net/ghyfq4gg/ this works because off the very large `padding-bottom: 999999em` and `margin-bottom: -999999em` to enforce an height on floated elements – Raymond Nijland Sep 06 '15 at 15:26

0 Answers0