Clearing last floated element in each row

Question

I have a set of divs with variable heights that have been floated left. When there are too many of said divs on a single line, the next div wraps to a new row (as it should). The problem I'm having is that the new row is started at an offset x position on the new row, such that the div is beneath the last div in the previous row that has no taller divs behind it- quite often leaving a large margin on the left side.

div.entry 
{
    float: left;
    width: 180px;
    padding: 10px;
}

I essentially want it so that the last div.entry in each "row" (the one before it wraps to a new row) clears the float, so that the next row of floated divs are all aligned to the same height, and don't have a rather large gap on the left side. Illustrated in ASCII:

What I expect to happen:

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+
+-----+ +-----+ +-----+ +-----+
|  E  | |  F  | |  G  | |  H  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+

What actually happens:

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+ +-----+ +-----+
                |  E  | |  F  |
                |     | |     |
                +-----+ |     |
                        +-----+
+-----+ +-----+
|  G  | |  H  |
|     | +-----+
+-----+

Michael

Answer 1

I had this problem once, I think I got around it my setting a min-height property to the divs.

Which gave me:

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+ 
+-----+ +-----+ +-----+ +-----+ 
|  E  | |  F  | |  G  | |  H  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+