Resize bootstrap div to fit content

Question

I am using twitter bootstrap to make 2 divs placed side-by-side. Each div has medium and large images inside it, arranged using jquery isotope. The problem is that when there are not enough images in a div, the div width remains same and there's a lot of extra space left. Like this :

I want the divs to align centrally and also reduce in width to fit the images inside it. Like this:

My HTML code is this :

<div id="container" class="container-fluid">
    <div class="row-fluid">
        <div class="legend span8">Section1</div>
        <div class="legend span4">Section2</div>
    </div>
    <div class="row-fluid">
        <div id="section1" class="span8">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
        <div id="section2" class="span4">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
    </div>
</div>

My CSS looks like this :

#section1 .small{
    width:150px;
    height:200px;
    overflow:hidden;
}
#section1 .big{
    width:320px;
    height:420px;
    overflow:hidden;
}
#section2 .small{
    width:80px;
    height:100px;
    overflow:hidden;
}
#section2 .big{
    width:170px;
    height:220px;
    overflow:hidden;
}

Other styles are bootstrap's.

Answer 1

I also use bootstrap with isotope, but what I do first is make sure the width's and height's respect my own design.

just change the ones you use, normally I end up using

.width2, .width3, .width4, .width8 and .height2, .height4

then, make sure your container has the correct size and apply to isotope.

after that, all your design will be set and fall correctly with your sizes.

by the way, you should end up having something like this:

<div id="container">
    <div class="weather item width2 height8" data-id="1"></div>
    <div class="country item width2 height4" data-id="2"></div>
    <div class="country item width2 height4" data-id="3"></div>
    <div class="country item width2 height4" data-id="4"></div>
    <div class="country item width2 height4" data-id="5"></div>
</div>

and inside each div, I personally use JsRender to render the templates, but you should have the bootstrap layout, inside each .item

Answer 2

I completely forgot about this question I had asked. I resolved the above situation by :

1) Setting equal left and right margins on the main container.

2) Setting the isotope in Section1 to right-to-left. Mine isnt really an Arabic site, but I am using images mostly so no issues.

Also, remove fixed-width specifications for all sections. Let the margins on container, and bootstrap's fluid design take care of centered-optimized design.