Sorry for the rather vague title, I couldn’t think up a better description for

Question

0

Editorial Team

Asked: May 28, 20262026-05-28T05:56:20+00:00 2026-05-28T05:56:20+00:00

Sorry for the rather vague title, I couldn’t think up a better description for

0

Sorry for the rather vague title, I couldn’t think up a better description for my problem.

I have a simple 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>

with some simple styling

.label{float:left}
.textbox{float:right;width:75%}
.div{float:right;width:75%}

With this, I would expect both input boxes to be left aligned, as input2 is has float:right with a width of 75%, and the parent div of input 1 is also floating right with the same width. However, thy don’t line up correctly, and I am not sure why. Tested in IE8 and firefox 9 – jsfiddle link: http://jsfiddle.net/nrF2W/

Note: I tried to make the simplest possible example which still showed the problem I was having. The div containing the first input box is intended to have more than just a single input box.

Edit: Say for example the initial input div should be:

<DIV class="div">
    <input value="1">
    <input type="checkbox"> 
</DIV>

Which is an input box followed by a checkbox, on the same line. Setting the width of the input box to be 75% doesn’t work for this situation. To clarify, its not the length of the input boxes not lining up that I have the issue with, it’s their lack of alignment on the left.