CODEWITHSUNDEEP
jquerycssjquery-isotope
Eric
Eric

Reputation: 5215

Why doesn't isotope fill the row in this simple layout?

I have a simple layout-- three colored boxes that just follow one after another in the code, all designed to fill a fixed-width div. Why doesn't isotope bring the blue box up next to the green box? My goal is to have all the boxes fill as much of the space as possible.

the layout

The code is super straightforward:

<style>
.video {
    width:435px;
    height:265px;
    margin:20px;
    background-color:yellow;
}
.tweet {
    width:200px;
    height:165px;
    background-color:green;
}
.post {
    width:206px;
    height:260px;
    background-color:blue;
}
#iso {
    width:970px;
    border:solid 1px red;
}
</style>

<div id='iso'>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
    <div class='b video'></div>
    <div class='b tweet'></div>
    <div class='b post'></div>
</div>

$(function () {
    $('#iso').isotope({
        itemSelector: '.b',
        layoutMode: 'masonry'
    });
});

Feel free to play with it here:

http://jsfiddle.net/pnoeric/Jn3UX/4/

Upvotes: 1

Views: 173

Answers (1)

Joe
Joe

Reputation: 15528

Try using:

$('#iso').isotope({
    itemSelector: '.b',
    layoutMode: 'fitRows'
});

I think this is the effect you're trying to achieve.

Fiddle: http://jsfiddle.net/Jn3UX/5/

Upvotes: 1

Related Questions