CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1522

Input boxes not lining up correctly

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.

Upvotes: 0

Views: 2494

Answers (4)

Deadlykipper
Deadlykipper

Reputation: 878

Try this: http://jsfiddle.net/YE288/11/

it's not in div's any more - I prefer using lists for form elements. But it will line up depending on how wide you set your labels.

EDIT: Using my example, you align the inputs to the size of the labels. This will create a uniform poition for any input - I'm not sure why you're insisting on using the extra div.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

They don’t line up since you are setting properties on a div element on one hand and on an input element on the other. But even if you fix this, the design is not robust—check out what happens if the labels are long and/or the browser window is very narrow or very wide.

A more robust approach is to use a table, with labels in one column, input fields in another. Then the first column will automatically be as wide as needed, and you need not make arbitrary guesses like 75%.

Upvotes: 0

giker
giker

Reputation: 4245

http://jsfiddle.net/nrF2W/2/

You had 75% for the div alone, not for the input

Upvotes: 3

Alex
Alex

Reputation: 7688

change .div{float:right;width:75%} to .div input{float:right;width:75%}

Upvotes: 0

Related Questions