HTML form align input boxes

Question

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

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;
}

Jeyarathnem Jeyachanthuru · Accepted Answer · 2014-04-17 05:06:42Z

1

Try this

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

answered Apr 17, 2014 at 5:06

Jeyarathnem Jeyachanthuru

1,19910 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akira Dawson · Accepted Answer · 2014-04-17 05:06:18Z

0

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 :)

answered Apr 17, 2014 at 5:06

Akira Dawson

1,2694 gold badges23 silver badges46 bronze badges

Comments

Imran Bughio · Accepted Answer · 2014-04-17 05:39:05Z

0

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;
}

edited Apr 17, 2014 at 5:39

answered Apr 17, 2014 at 4:57

Imran Bughio

4,9812 gold badges32 silver badges54 bronze badges

2 Comments

Imran Bughio Over a year ago

sorry i didn't saw your fiddle. I am looking at it right now

Imran Bughio Over a year ago

Now that i saw your screenshot this is the updated css which will create the exact same look.

Collectives™ on Stack Overflow

HTML form align input boxes

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related