CODEWITHSUNDEEP
htmlcss
neel
neel

Reputation: 5293

Vertical Align of Input text box

I want to vertically align all the input boxes in a particular is div

my code is in
http://jsfiddle.net/eSPMr/72/

<div id="editpart3">
<div id ="address1">
<p><b>Residential Address:</b></p>
<p> Line1 : <input type="text" value="@Model.Mem_ResAdd1" name="Mem_ResAdd1" /></p>
<p> Line2 : <input type="text" value="@Model.Mem_ResAdd2" name="Mem_ResAdd2" /></p>
<p> Line3 : <input type="text" value="@Model.Mem_ResAdd3" name="Mem_ResAdd3" /></p>
<p> Line4 : <input type="text" value="@Model.Mem_ResAdd4" name="Mem_ResAdd4" /></p>
<p>PIN Code : <input type="text" value="@Model.Mem_ResPin" name="Mem_ResPin" /></p>
<p><b>Res Phone: &nbsp;</b> <input type="text" value="@Model.Mem_ResPh" name="Mem_ResPh" /></p>
</div> 
/div>

#editpart3 {
margin-top:10px;
border:.5px solid #bbb;
min-height:250px;
height:auto;
width:100%;
border-radius:5px;

#editpart3 input[type="text"] {
    width:50%;
    margin-left:5%;
}
 #address1 {
float:left;
width:40%;
margin-left:4%;
height:auto;
}
#address2 {
float:left;
margin-left:9%;
height:auto;
width:40%;
}
#address1 p,#address2 p{
padding-top:10px;
}

i am tried to put margin left but affect all the input box. Is this only possible, when i take that particular input boxes seperatly ?

Upvotes: 0

Views: 4874

Answers (2)

Praveen
Praveen

Reputation: 56501

For a good format for form, I prefer to use tabular structure like this

enter image description here

Check this JSFiddle

Upvotes: 1

imulsion
imulsion

Reputation: 9040

Although I am against using tables for anything other than tabular data, in this case they can be extremely useful and effective for aligning form input elements:

<div id ="address1">
<p><b>Residential Address:</b></p>
<table border = "0">
<tr>
<td><p> Line1 : </td><td><input type="text" value="@Model.Mem_ResAdd1" name="Mem_ResAdd1" /></td></p></tr>
</div>

Continue the table for your other input elements.

Upvotes: 1

Related Questions