I have two div's inside a form like this:

<form ...>
<div class="column">
 ... Form elements ...
</div>
<div class="column">
 ... Form elements ...
</div>
</form>

And here is the css for the column class:

.column {float: left; width: 47.5%; margin-right: 2.5%;}

The first column contains 3 form elements. The first two fields are required and the third is optional but has email address validation. If I load the page, place the marker inside the last field and enter an invalid email address and then click on the submit button, the last field is validated (email) but the first two (required) isn't triggered. If I click the submit button again, validation is triggered as expected (for all 3 fields).

Here's the strange part though. If I remove the width declaration from the column class and repeat the process, all fields are validated as expected. Why do setting the width effect validation? Is this a know issue? What can I do to fix it?

In short, this works .column {float: left; margin-right: 2.5%;} while this doesn't .column {float: left; width: 47.5%; margin-right: 2.5%;}.

I've tested this with the following setup:
Firefox 3.6.13
jQuery 1.5.1
jQuery validation 1.8.0

Best regards / Kristoffer