CSS Stacked divs

I have some divs which are all floating left, If 开发者_高级运维you see the attached jsfiddle you will see what im trying to do, in the fiddle there is a yellow box, I need this to be flush with the bottom of the green box only im not sure if this is even possible?

Is it? and if so how may I do this? Thanks in advance!

http://jsfiddle.net/K5zjc/

---

Try something like this jsFiddle. Techincally, you float even .box items to the right instead of left and then you are getting self-filling columns in accordance to their content. So, in your CSS you add:

.box:nth-child(odd) {clear: left}
.box:nth-child(even) {float: right; clear: right}

UPDATE

Apparently this solution doesn't work nice if you have more than these specific blocks. So, probably, jQuery Masonry is the only way for you to get the good result.

---

You must add two divs with float: left that act as columns.

See: http://jsfiddle.net/K5zjc/5/

<div style="width:200px;">
    <div class="boxContainer">
        <div class="box green">
            <ul><li>Item</li></ul>
        </div>
        <div class="box yellow">
            <ul><li>Item</li><li>Item</li></ul>
        </div>
    </div>
    <div class="boxContainer">
        <div class="box red">
            <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>
        </div>
        <div class="box cyan">
            <ul><li>Item</li><li>Item</li></ul>
        </div>
    </div>
</div>