CODEWITHSUNDEEP
htmlcss
user1296762
user1296762

Reputation: 512

aligning input fields in divs

I have tried everything to align these boxes, so they start from the same place downwards. I'm not sure which div to put in my stylesheet

 <div class="boxes">
 <p class="h3"> You are able to add up to 3 addresses.
 Please select the type of address, using the following guide
 <ul>
 <li>H: Permanent home address</li>
 <li>P: Postal address (where you will be from June to September)</li>
 <li>L: Local address (where you currently live)</li>
 </ul>
 </p>

<div id="address">

<div id="input1" style="margin-bottom:4px;" class="input">
Street<span class="required">*</span>
<input name="Street[]"  type="text" >
</div>

<div id="input2" style="margin-bottom:4px;" class="input">
Line2
<input name="Line2[]"  type="text" >
</div>

<div id="input3" style="margin-bottom:4px;" class="input">
Line3
<input name="Line3[]"  type="text" > 
</div>

Any ideas?

Upvotes: 1

Views: 9779

Answers (1)

David Thomas
David Thomas

Reputation: 253318

Having amended your HTML, to wrap the label/associated text in actual label elements, added a for attribute to those elements and a corresponding id attribute to the input elements:

<div class="boxes">
    <p class="h3">
         You are able to add up to 3 addresses. Please select the type of address, using the following guide
        <ul>
            <li>H: Permanent home address</li>
            <li>P: Postal address (where you will be from June to September)</li>
            <li>L: Local address (where you currently live)</li>
        </ul>
    </p>
    <div id="address">
        <div id="input1" style="margin-bottom:4px;" class="input">
            <label for="street">Street<span class="required">*</span></label><input name="Street[]" id="street" type="text">
        </div>
        <div id="input2" style="margin-bottom:4px;" class="input">
             <label for="line2">Line2</label><input id="line2" name="Line2[]" type="text">
        </div>
        <div id="input3" style="margin-bottom:4px;" class="input">
             <label for="line3">Line3</label><input id="line3" name="Line3[]" type="text">
        </div>
    </div>
</div>​

The following CSS works:

#address label {
    display: inline-block;
    width: 5em;
    text-align: right;
    padding-right: 0.5em;
}
#address input {
    display: inline-block;
}​

JS Fiddle demo.

In the above, once the text was wrapped in a tag (to become the label element), it could then be assigned display: inline-block; and could then be given a width. Also, white-space was removed from between the close of the label and the opening of the input, in order to prevent white-space in the HTML file causing any space between the two elements.

Upvotes: 5

Related Questions