Question

I’m working on a 4 column grid of divs, that when the browser size is reduced all the divs are scaled down in size in ratio.
The problem is I want to have 2 div sizes within the grid (big and small), i.e. the big div is the width of 2 columns, while the small div is the width of one.
Here’s my code and the problem I’m having:
HTML:

<div id="thumb-wrap">

    <div id="thumb-container-2">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #ffe413;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #8ca4a5;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f9ded6;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f57882;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #eaebe6;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #ffe93b;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f3f3f4;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #003738;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #939597;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #e6e7e0;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f14e5b;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #de4d79;">
            some text
        </div>
    </div>  
</div>

CSS:

#thumb-wrap {
    position: absolute;
    width: 95%;
    left: 3%;
    top: 40px;
    font-family:'Neuzeit S LT W01 Book', Helvetica, sans-serif;
    font-size: 14px;
    padding-bottom: 150px;
}

#thumb-wrap a {
    opacity: 1.0;
}

#thumb-wrap a:hover {
    opacity: 0.6;
    text-decoration: none;
}

#thumb-container {
    display: inline-block;
    position: relative;
    width: 24%;
    padding-left: 0.5%;
}

#thumb-container-2 {
    display: inline-block;
    position: relative;
    width: 49%;
    padding-left: 0.5%;
}

.thumb-dummy {
    padding-top: 66%;
}

.thumb-element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    border: 2px solid white;
    padding-top: 19px;
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Here’s a working demo jsfiddle here too: http://jsfiddle.net/jzgSP/

As you can see, the problem I’m having is that when a bigger div size is introduced, the smaller divs are aligning to the bottom, instead of all fitting nicely into the grid and sitting flush with the top of the page.
I have used the masonry / isotope plugins before, but I’m not sure they’re relevant for something like this really. I’m not sure what the best solution is.

Answer 1

To get the various divs to wrap you’ll need to float them. I have a working example, but the margins are being difficult.

http://jsfiddle.net/jzgSP/3/

#thumb-container, #thumb-container2 {float: left;}

UPDATE: Getting closer by using margins on #thumb-wrap rather than padding on the containers: http://jsfiddle.net/jzgSP/4/

UPDATE AGAIN: I’m working in Firefox, and the only way to get the elements to clear each other 100% of the time as you have them set up is to use odd div widths. I haven’t been able to determine why, but my guess is that border thickness calculation is at play.

http://jsfiddle.net/jzgSP/7/

#thumb-container {width: 24.01%;}
#thumb-container2 {width: 48%;}