Apologies for the somewhat vague title, I struggled to come up with a more accurate description of my issue.
Here is a basic HTML form:
<html>
<FIELDSET>
<DIV>
<SPAN class="label">Label 1</SPAN>
<DIV class="div">
<input id="input1" value="The first input box">
</DIV>
</DIV>
</FIELDSET>
<FIELDSET>
<DIV>
<SPAN class="label">Label 2</SPAN>
<INPUT id ="input2" class="textbox" value="the second input box">
</DIV>
</FIELDSET>
</html>
This form includes some simple CSS styling applied to it
.label{float:left}
.textbox{float:right;width:75%}
.div{float:right;width:75%}
Based on this setup, both input boxes should align to the left due to input2 having float:right and a width of 75%, while the parent div of input1 also floats right with the same width. However, they do not align properly, and I am uncertain why this is happening. This has been tested in IE8 and Firefox 9 - for a jsfiddle demonstration click here: http://jsfiddle.net/nrF2W/
Keep in mind that I aimed to keep the example as simple as possible while still showcasing the issue at hand. The div containing the first input box was meant to have multiple elements, not just a single input box.
Edit: For instance, if the initial input div looked like:
<DIV class="div">
<input value="1">
<input type="checkbox">
</DIV>
This scenario involves an input box followed by a checkbox, side by side. In such cases, setting the input box width to 75% does not produce the desired effect. To clarify, the length of the input boxes not lining up is not the issue, rather it's their misalignment on the left side.