Question

I’m trying to do something that must be relatively easy, but I’ve spent hours mucking around with this and I’m no getting to the answer.

I need to layout some input fields and their layers on a grid (or like a table I guess) with

lable     input      label input
label     input      label input

Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I’ve managed to get is

label     input    label  input
label     logerinput    label  input

How do I line up the second set of labels and there inputs?

I’ve made two classes for the labels

#dpi_form label { 
  display: inline-block; 
  width: 150px; 
  margin-left: 20px;
}
#dpi_form .right-label {
  display: inline-block;
  width: 150px;
  margin-left: 220px; 
}

and the associated controls are

  <label for="req_retailer_index_fld">Select the retailer*:</label><select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
  <label for="req_region_index_fld" class="right-label">Select the region*:</label><select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
  <label for="req_customer_type_index_fld">Select the customer type*:</label><select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
  <label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label><select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />

within a div.

I’ve tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can’t get the result I’m after.

I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.

Any clues please?

Peter.

Answer 1

Despite my comment about using tables on your question, this is how I would do it.

CSS:

label,
input {
    display: block;
}
label {
    padding: 4px 0 0;
}
.labels1 {
    float: left;
    width: 80px;
}
.labels2 {
    float: left;
    width: 80px;
}
.inputs1 {
    float: left;
    width: 200px;
}
.inputs2 {
    float: left;
    width: 200px;
}

HTML:

<div class="labels1">
    <label for="input1">Input 1: </label>
    <label for="input2">Input 2: </label>
    <label for="input3">Input 2: </label>
</div>

<div class="inputs1">
    <input type="text" value="" name="input1" id="input1" />
    <input type="text" value="" name="input2" id="input2" />
    <input type="text" value="" name="input3" id="input3" />
</div>

<div class="labels2">
    <label for="input4">Input 4: </label>
    <label for="input5">Input 5: </label>
    <label for="input6">Input 6: </label>
</div>

<div class="inputs2">
    <input type="text" value="" name="input4" id="input4" />
    <input type="text" value="" name="input5" id="input5" />
    <input type="text" value="" name="input6" id="input6" />
</div>

Then you can change the labels and inputs classes to the width you want.
Although I still think tables are easier because then you don’t have to worry about setting widths yourself; you also don’t have to worry about vertical alignment with tables.