CSS display inline-block and fill all spaces with elements

Question

I have elements with a display:inline-block, and these's one elements that's bigger than the rest causing a space between the elements, as in the picture.

Here's a fiddle to the example.

http://jsfiddle.net/uu64hyed/

NOTE: Do expand the result window width to see the full problem.

CSS

.calenderMonth_header {
    height:35px;
    line-height:35px;
    text-align:center;
    background-color: rgba(221,221,221,1);
    border-bottom: 1px solid rgba(221,221,221,1);
}
.calenderMonth {
    height: 160px;
    width:160px;
    margin:10px;
    border-radius:2px;
    background-color: rgba(238,238,238,1);
    border: 1px solid rgba(221,221,221,1);
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
}
.activeMonth { height:340px; width:340px;}
.calenderMonth:hover { border: rgba(0,153,204,1) 1px solid}

JS

$(document).ready(function(e) {
    var months = [ 
    {month:'January', state:''},
    {month:'Feburary', state:''},
    {month:'March', state:''},
    {month:'April', state:''},
    {month:'December', state:''}];
    $(months).each(function(index, element){
        element.state == 'current' ?
        activeMonth = 'activeMonth':activeMonth = '';
        $('.monthsHolder').append('<article class="calenderMonth '+activeMonth+'">\
        <header class="calenderMonth_header">'+element.month+'</header>\
        </article>');
    });
});

HTML

<section class="app_section app_section_calender hide center">
  <header class="app_section_header">CALENDER
  <section class="monthsHolder"  align="center"></section>
</section>

How do I make the smaller boxes to fill the remaining spaces?

Answer 1

One solution would be to float your months left, but then you'd have to move the centering to your months holder and give a width. Like this:

.calenderMonth {
    height: 160px;
    width:160px;
    margin:10px;
    border-radius:2px;
    background-color: rgba(238,238,238,1);
    border: 1px solid rgba(221,221,221,1);
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
    float: left;
}

.monthsHolder
{
    margin: 0 auto;
    width: 560px;
}

http://jsfiddle.net/7dyt1tLL/1/

Answer 2

Add a float: left to your activeMonth class :

.activeMonth {
  float: left;
  height: 340px;
  width: 340px;
}

JsFiddle: http://jsfiddle.net/ghorg12110/uu64hyed/2/

Answer 3

Inline block will not fill available spaces. It will push down any elements which cannot fit in the width available. Floating elements will fix this.

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.