Odd / Irregular Float CSS Elements in the Browser - html

Question

I've got a static site, which is all of a sudden displaying irregular headings. This is a single page with lots of JavaScript including tabular selections at the top of the page. The site worked just fine six months ago. Now I'm seeing unexplained mis-alignment of input elements on a half of the 12 different navigation tabs:
Decorative Ends
Round to Tapered
Bracing
Round to Square
Round to Flat
Airframe Cluster
The headings contained within a form:
<form id="dte_form">
<div class="containerLeft">...</div>
<div class="containerLeft">...</div>
<div class="containerLeft">
<label title="Data can.. [hover info]">Tube O.D. (mm): </label>
<input type="text" id="dteCutTubeOD" value="31.75" size="8">
<br>
<label>Amplitude (mm):</label>
<input type="text" id="dteAmplitude" value="25.4" size="8">
<br>
<label># of Cycles:</label>
<input type="text" id="dteNumOfCycles" value="3" size="8">
<br>
</div>
<div style="clear: both"></div>
<div class="containerLeft">
<input type="button"...>
<input type="button"...>
<input type="button"...>
<input type="button"...>
</div>
</form>
The CSS is nothing fancy:
.containerLeft {
float: left;
margin: 4px 20px;
}
.containerLeft label {
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
.containerLeft input[type=text] {
float: right;
height: 15px;
margin: 4px 5px;
padding-left: 5px;
}
The heading should look like this:
Basically, in a div, I would float the label left, float the input element right, add a <br> and repeat. I can't figure out why occasionally the elements don't line up correctly. I'm sure I'm missing something silly, but I just can't see it. Any ideas what is causing the occasional misalignment?
Click here for website. Note. I'm seeing the same results in both Chrome and Firefox.

Answer 1

This is what happens when you use floats. They overlap following blocks and shrink line boxes.
If you want to prevent an block element from being adjacent to a float, just use clear.
.float {
float: left;
width: 50px;
height: 3em;
border: 1px solid;
background: yellow;
}
.normal, .clear {
height: 2em;
border: 1px solid;
background: pink;
}
.clear {
clear: left;
}
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="normal">Normal</div>
<br /><br />
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="clear">Clear</div>

Answer 2

So apparently the issue is related to element height. Note that the label and input elements have different heights. This was done for appearance. In some combinations and element lengths the float thing gets futzed up.
The corrective action was to modify the CSS style sheet in one place:
.containerLeft label {
clear: both; /* new addition to this element */
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
An alternative would be to use <div style="clear: both"></div> in lieu of the <br> elements (or use the handy CSS library classes offered up by Oriol)