Sorry for the rather vague title, I couldn't think up a better description for my problem. I have a simple HTML form: \[code\]<html><FIELDSET> <DIV> <SPAN class="label">Label 1</SPAN> <DIV class="div"> <input id="input1" value="http://stackoverflow.com/questions/8894263/The first input box"> </DIV> </DIV> </FIELDSET> <FIELDSET> <DIV> <SPAN class="label">Label 2</SPAN> <INPUT id ="input2" class="textbox" value="http://stackoverflow.com/questions/8894263/the second input box"> </DIV> </FIELDSET></html>\[/code\]with some simple styling\[code\].label{float:left}.textbox{float:right;width:75%}.div{float:right;width:75%}\[/code\]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:\[code\]<DIV class="div"> <input value="http://stackoverflow.com/questions/8894263/1"> <input type="checkbox"> </DIV>\[/code\]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.
Input boxes not lining up correctly
- Thread starter mr-e c a
- Start date