Align Group Of Labels And Inputs

Without the use of tables, using CSS, how can i align a group of labels and their associated input controls like below (these controls will be in a div): The controls will be laid

Solution 1:

This is kind of open-ended, since a lot depends on the questions, the labels and other specific considerations that you may have for your code.

However, the easiest way to accomplish something like this (IE8+) is probably to use display:table and display:table-cell.

Here's a quick fiddle that basically does that: http://jsfiddle.net/cwz3g/

It uses a lot of divs: one per column, one per label/field pairing and one each for the label and field, but should cover a lot of the common things like vertical alignment of labels and fields. You'll probably just need to tweak some things for your code situation, but it should get you started.

Solution 2:

For your two columns, you'll want to put them in container divs, which could then be floated against each other or absolutely positioned, or whatever works for your layout.

To make the labels take up the same amount of room, they can be styled with a width attribute.

Finally, in your diagram, you've got the labels left-justified and the inputs right-justified. That's doable, but to my eyes it scans better if the inputs are justified toward their labels.

I've got it all in a fiddle here: http://jsfiddle.net/M7AjF/

<div class="form-column">
<label for="Input1">Option 1</label> 
<select id="Input1"><option>All</option></select>
<br>
<label for="Input2">Option 2</label> 
<input id="Input2" type="text"/>
<br>
<label for="Input3">Option 3</label> 
<input id="Input3" type="text"/>
</div>

<div class="form-column">
<label for="Input4">Option 4</label> 
<select id="Input4"><option>--</option></select>
<br>
<label for="Input5">Option 5</label> 
<select id="Input5"><option>0</option></select>
<br>
<label for="Input6">Option 6</label> 
<select id="Input6"><option>1</option></select>
</div>

And the css:

.form-column { 
    width: 50%;
    float:left; 
}
.form-column label {
    width: 40%;
    padding-right: 10%;
}

/*
This right justifies your inputs, which I don't recommend.

.form-column select, .form-column input {
    float: right;
}
.form-column br {
    clear: right;
}
*/

Solution 3:

I suggest to use display:table layout like this:

html

<div class="table">
    <div class="row">
        <div class="cell"><label>Option 1</label></div>
        <div class="cell"><select><option>ALL</option></select></div>
        <div class="cell"><label>Option 4</label></div>
        <div class="cell"><select><option>--</option></select></div>
    </div>
    <div class="row">
        <div class="cell"><label>Option 2</label></div>
        <div class="cell"><input type="text"></input></div>
        <div class="cell"><label>Option 5</label></div>
        <div class="cell"><input type="text"></input></div>
    </div>
    <div class="row">
        <div class="cell"><label>Option 3</label></div>
        <div class="cell"><input type="text"></input></div>
        <div class="cell"><label>Option 6</label></div>
        <div class="cell"><select><option>1</option></select></div>
    </div>
</div>

css

.table{
    display:table;
}

.row{
    display:table-row;
}

.cell{
    display:table-cell;
}

.table > .row > .cell{
    text-align: right;
    padding-right: 75px;
}

.table > .row > .cell > input{
    width:75px;
}

fiddle

Solution 4:

you can use bootstrap.css for easy way. http://getbootstrap.com/components/ check my fiddle.

<form class="form-horizontal" role="form" method="post" action="">
<div class="col-xs-6">
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>    
 <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
</div>
<div class="col-xs-6">
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>    
 <div class="form-group">
    <label class="col-xs-4">Title</label>
    <div class="col-xs-8">
        <input name="title" type="text" class="form-control" value="Circular Countdown"/>
    </div>
  </div>
</div>    
</form>

http://jsfiddle.net/4M7qH/