LI’s move incorrectly on browser resize

I am creating a wordpress site, using and modifying one of the available templates.

Currently all of the posts are 80% width of the page, one after another going down the page. But we would like the posts to be in boxes instead. This is all working fine, however, there is a slight problem with the response on browser resize / smaller screens.

I have 3 boxes, in a line left to right. When i resize the screen (change the width), the 3rd box drops down below the first (as expected) however if the second box is longer/higher/taller than the first, the the 3rd box drops all the way down to the bottom of the 2nd box, but on the first box’s column.

Ive made a very, very simplified JSFiddle to show this,
http://jsfiddle.net/vux85/

Here is the code from above for if the jsfiddle isnt working..

CSS:

#ul1 {
    width:100%;
    background: red;
    list-style:none;
}

.list_item {
    width:100px;
    float:left;
    margin:15px;
    background:green;
}

HTML:

<ul id="ul1">
    <li class="list_item">This is small.</li>
    <li class="list_item">This box is very very very very very very very very very big, bigger than the other two boxes because it just is. </li>
    <li class="list_item">This one is medium sized, a bit of text in here</li>
</ul>

The result i would like is box 3 dropping below box 1, like it does, but all the way up to the bottom of box 1 (with some margin of course)

Thanks!