CSS Stacked divs - html

Question

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/

Answer 1

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.

Answer 2

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>