I need to arrange a series of elements in rows that look like tables, with fixed width but variable height determined by the content. Each element is set to float left and have the same width value. The issue I'm facing is that sometimes the elements in a row don't align properly if one has a taller height than the rest. I want all elements to neatly form rows, regardless of individual heights.
What I'm aiming for is:
Where all elements wrap nicely into rows.
Using a table could achieve this, but I need the flexibility for the div elements to scale based on browser size. Tables wouldn't allow for that. Simply using clear: left wouldn't achieve the desired scaling based on browser width.
I'm open to using JavaScript solutions (preferably jQuery) or any other creative hacks to achieve the goal of having neat rows of elements.