1

I am breaking my head over this seemingly easy problem, perhaps someone could help. I would like an arbitrary amount of inputs, with labels, stacked horizontally on one line like in the image.

enter image description here

j08691
  • 204,283
  • 31
  • 260
  • 272
user1803763
  • 9
  • 1
  • 4

4 Answers4

0

There are a number of ways to go about this. Personally, I like using tables for this type of data (but if it's not tabular data it is recommended to use other means like DIVs). I'll try to show a quick example of a table:

Table:

<table width="100%" cellpadding="0" callspacing="0" border="0">
 <tr>
  <td width="200">LABEL 1</td><td>&nbsp;</td> <!-- this is the padding table cell -->
  <td width="200">LABEL 2</td><td>&nbsp;</td>
  <td width="200">LABEL 3</td><td>&nbsp;</td>
 </tr>
</table>

Example Table JSFiddle

Using Div's are slightly more involved, as they are inline by default; you would get your labels on different lines. You can look into CSS attributes like "display: table-cell" to achieve the same results as the above, otherwise you can look into absolute and relative positioning using CSS.

<div width="100%">
 <div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
 <div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
 <div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>

However, there are still some problems with this as it's assuming your layout is 100% the width of the page/browser viewing area.

Ben Ashton
  • 1,385
  • 10
  • 15
  • 1
    This does not take into account the fixed with for the label and filling the rest of the available space with the input – user1803763 Nov 06 '12 at 18:01
  • Simply add 3 more table cells, the first being fixed-width, the second being dynamic. In fact, you don't have to specify any td widths except for the fixed width cells. Updated answer in case you want to try it. – Ben Ashton Nov 06 '12 at 19:22
0

The best option for this type of classic “GUI widget layout engine” layout is the CSS 3 flexbox feature, but browser support is not yet consistent enough that I would recommend using it.

Absent that, flexible "fill space" layouts generally require table layout. Thanks to CSS display, there is no particular necessity to write the table as a HTML table. The following example is similar to your example image:

<html><head>
<title>example</title>
  <style type="text/css">
    ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; }
    .myform li { display: table-cell; border: .1em solid gray; }
    .myform li > * { display: table; width: auto; margin: .4em; }
    .myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; }
    .myform input { display: table-cell; width: 100%; }
    .col1 { width: 33%; }
    .col2 { width: 33%; }
    .col3 { width: 34%; }
  </style>
</head><body>
  <form>
    <ul class="myform">
      <li class="col1"><span><label for="a">Label</label>              <input id="a" name="a"></span></li>
      <li class="col2"><span><label for="b">Label</label>              <input id="b" name="c"></span></li>
      <li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li>
    </ul>
  </form>
</body></html>

There is exactly one element introduced solely for layout in the markup: the <span> is needed to serve as the table within the table-cell.

The width: 1%; of the label cell is not an actual dimension but simply to force it as narrow as possible (an absolute rather than percentage with will not have the same effect). The white-space: nowrap; prevents the label from getting wrapped due to this.

The .col1 and so on are for specifying the widths of the columns.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
  • Though there are elements that I can use for the input, that resize the containing box. For instance, I use a dropdown box for the input and when the labels inside of that are long, it changes the size of the parent box, even though the width is specified. – user1803763 Nov 07 '12 at 20:08
  • You might need to introduce another element containing the input control and set the size of that, then — it is a little bit of a funny thing to turn a form control into a table cell directly. Or perhaps @Roman's approach is better. – Kevin Reid Nov 07 '12 at 20:10
0

EDIT: updated to address fixed width labels. (arbitrarily set to 100px)

http://jsfiddle.net/SebastianPataneMasuelli/XHrSr/

HTML: 

<div>
 <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
  <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
  <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
</div>

CSS:

div { width: 100%; } 
div div { 
    width: 33%; 
    background-color: salmon; 
    float: left; 
    position: relative
}
div div div { 
    background-color: pink; 
    position: relative; 
    z-index: 2
}
div div div:last-child { 
    background-color: red;  
    position: absolute; 
    width: 100%; 
    z-index: 1 
}
.label { width: 100px }

​

​

Sebastian Patane Masuelli
  • 4,217
  • 1
  • 18
  • 23
0

Generally, when you want something to "take up the remaining space" (like your input box) you have 3 options:

  1. Flexbox, which would be ideal, but not widely supported yet.
  2. Tables, like explained in Kevin Reids answer
  3. Establish separate Block Formatting Contexts, example below

HTML

<div class="container">
    <div class="field">
        <label for="in1">Label</label>
        <div><input type="text" id="in1"></div>
    </div>
    <div class="field">
        <label for="in2">Label</label>
        <div><input type="text" id="in2"></div>
    </div>
    <div class="field">
        <label for="in3">Label</label>
        <div><input type="text" id="in3"></div>
    </div>
</div>​

CSS

.container {
    padding: 20px;
    background: #999;
    overflow: hidden; /* for float containment */
}

.field {
    padding: 4px;
    background: #fff;
    border: 2px solid #999;
    float: left;        
    width: 33%;
    -webkit-box-sizing: border-box; /* 33% effective width */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    float: left;
    width: 100px; /* fixed width of label */ 
}

.field div {
    overflow: hidden; /* create a new Block Formatting Context */ 
}

/* inputs fill the new BFC */
input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
​

There is only 1 added layout element, which would be the div that wraps the input. This is because input doesn't want to behave like a block element, even if you tell him to do so.

fiddle: http://jsfiddle.net/RqzJC/

Community
  • 1
  • 1
Roman
  • 5,888
  • 26
  • 47