css - Floated divs don't like up vertically as desired -

this question has answer here:

• css floating divs @ variable heights [duplicate] 10 answers

i've got divs, floated left, first of 3 times wider , bit shorter rest. when smaller divs wrap , break onto next "line", i'd first 3 of smaller divs lie flush against bottom of larger one. (a bit tricky describe in text, fiddle give idea.)

how make happen?

markup:

<div class="bigger"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> <div class="smaller"></div> 

style:

.bigger {     height: 40px;     width: 308px;     margin: 0 4px 4px 0;     background: red;     float: left; }  .smaller {     height: 60px;     width: 100px;     margin: 0 4px 4px 0;     background: blue;     float: left; } 

the 3 left-most blue divs in fiddle should line against red 1 according margins (4px bottom margin on red div)

http://jsfiddle.net/pkbqh/

for record, looks pinterest accomplished staggered float-like layout using script assign absolute positions each div, i'd rather not do.

you wrap whole thing in outer box of right width:

.outside {     width: 324px; } 

...like this...