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.