How can I make these floated divs wrap properly?

Question

I'm trying to write some CSS to make a Drupal node edit form look nicer. Basically I want the form elements to all be floated to the left. At the moment I am just applying some simple CSS to the form element ids:

.node-complaint-form .form-item-title,
.node-complaint-form #edit-field-date-of-complaint,
.node-complaint-form #edit-field-mfaa-class, 
.node-complaint-form #edit-field-loan-writer-staff-member,
.node-complaint-form #edit-field-product-of-service-provide,
.node-complaint-form #edit-field-date-of-events-leading-to- {
    float: left;
    width: 240px;
    margin: 0 20px 0 0;
}

This looks fine until the browser window is resized, at which point this happens:

You can see that "product of service provided" and "date of events leading to complaint" have wrapped around in a weird way. I want them to go all the way to the left, but I can't figure out why they're not doing it.

Here is a JSFiddle of what I'm trying to achieve. You can see when you resize the window with the fields in it, they all wrap next to each other correctly.

How can I achieve this in Drupal using (preferably) only CSS.

Answer 1

To achieve this in pure css, here are two options.

1 As mentioned by @xec in comments, assign an arbitrary common height to all the elements

2 Since you already have established fixed widths, you can use a combination of media queries and nth-child selectors to specify a clearing pattern for various widths. For example:

@media (max-width: 680px) {
  label:nth-child(3n) { clear: left; }
}

http://jsfiddle.net/H3y8j/48/