I'm still getting used to CSS when it comes to e-commerce / product display websites and am having an issue with one I'm working on right now.

Basically I want to display 3 products in each row and stack the rows on top of each other. This works great for the most part, but the moment one of the products / descriptions is lower than another it causes the div below it to shift right (because it hasn't cleared).

I've tried setting "clear: left" but doing so will cause it to clear the left column (which I obviously don't want to happen).

Example of the problem
Here is the CSS file

Perhaps I'm not setting up the div's properly, or there's a better way to stack them ... I don't know. I've always used tables for this purpose but I'm trying to get away from them as much as possible.

Any help or suggestions would be greatly appreciated.