Flexible div positioning
===

I have several divs on a page that all have the same width but different heights. They are all in one div, the <code>#note1PreviewDiv</code>. They all share the class <code>.note</code>, which has the following css code (among other):

    .note{
	    width: 160px;
	    padding: 10px;
	    margin: 10px;
	    background: #e3f0ff;
	    float: left;
	}

I thought with <code>float: left;</code> they would all automatically align so that they are well aligned among each other.

Here's a preview of what it looks like:

![Current state] (http://posti.sh/img/ist.png)

And here's what the positioning should be like:

![Desired state] (http://posti.sh/img/soll.png)

I think you get the idea. Somehow it seems to me the height of the leftmost div pushes the other divs in the second row to the right - but that's only guessing.

Thanks for your help!

Charles