CODEWITHSUNDEEP
htmlcssformsinputlabel
Birdlady9604
Birdlady9604

Reputation: 207

HTML form align input boxes

I want the input boxes to all line up together on the right edge I am not sure how to do this.

Here is an image that shows what I want to do

http://jsfiddle.net/Q9b62/

Here is my CSS:

.bookingForm {
height:450px;
background-color: #D3412A;
}

form{
padding:20px 0 0 70px;
margin-left: 10%;
}

form select,form input,form textarea {
margin:8px 0;
}

.bookingForm .formColumn1,
.bookingForm .formColumn2{
float:left;
}

Upvotes: 1

Views: 1964

Answers (3)

Imran Bughio
Imran Bughio

Reputation: 4941

Check this link http://jsfiddle.net/Q9b62/5/

I have changed some css let me know if you dont understand any thing.

.container {
    width: 960px;
    margin:0 auto;
    background-color: blue;
}

.bookingForm {
    height:auto;
    background-color: #D3412A;
}
.bookingForm:before, .bookingForm :after {
    content: "";
    display: table;
    line-height: 0;
}
.bookingForm :after {
    clear: both;
}


form{
    padding:20px 0 0 70px;
    margin-left: 10%;
}

form select,form input,form textarea {
    margin:8px 8px 8px 0;
}

.bookingForm .formColumn1,
.bookingForm .formColumn2{
    float:left;
}
label{
    display:inline-block;
    width: 120px;
}
label[for="additionalInfo"]{
    width: auto;
    display: block;
}

Upvotes: 0

Jeyarathnem Jeyachanthuru
Jeyarathnem Jeyachanthuru

Reputation: 1189

Try this

I have done a demo on codepen. http://cdpn.io/vCzgb

Upvotes: 1

Akira Dawson
Akira Dawson

Reputation: 1267

I'm not sure if this is what you're after. Just update your CSS with this:

form select,form input,form textarea {
    margin:8px 0;
    display:inline-block;
}
form label{
    display:inline-block;
    min-width:30%;

}

This will allow the label to stay on the left side, and the text-area, input and select will be to the right of the label. This is assuming I understood your question correctly :)

Upvotes: 0

Related Questions