HTML/CSS : Line up multiple Label and Input fields

Question

I am not great at HTML and CSS and i am trying to understand how to line up multiple elements on a page

I have been able to line up all the rows on the page but for some reason the Labels are appearing above the input fields when i want them to appear beside them like in the pictures below

What it looks like:

What i want it to look like:

I need the fields to be aligned by where the end of the label meets the start of the input

Please this JSFiddle of the code that i am using

CSS

.alignleft {
  float: left;
  width:33.33333%;
  text-align:left;
}
.aligncenter {
  float: left;
  width:33.33333%;
  text-align:center;
}
.alignright {
 float: left;
 width:33.33333%;
 text-align:right;
}

HTML

 <table class="striped" width="90%">
    <tr>
        <td class="alignleft">Gather host info:
            <button id="gatherHostInfo" type="button">Gather Host Info</button>
        </td>
    </tr>
    <tr>
        <td class="alignleft">Host password:
            <input type="text" id="hostPassword" />
        </td>
        <td>&nbsp;</td>
        <td class="aligncenter">Serial Number:
            <input path="serialNumber" size="30" />
            <errors path="serialNumber" cssClass="error" />
        </td>
    </tr>
    <tr>
        <td class="alignleft">Resource Name:
            <input path="resourceName" id="hName" size="30" />
            <errors path="resourceName" cssClass="error" />
        </td>
        <td>&nbsp;</td>
        <td class="aligncenter">Resource Status:
            <select path="resourceStatus">
                <option value="Available" label="Available" />
                <option value="InActive" label="InActive" />
            </select>
        </td>
    </tr>
    <tbody id="ipTable">
        <tr>
            <td class="alignleft">Primary Mgmt IP address:
                <input path="IPaddress" id="ip" size="30" />
            </td>
            <td>&nbsp;</td>
            <td class="aligncenter">VMKernel:
                <input path="VMKernel" size="30" />
        </tr>
        <tr>
            <td class="alignleft">Resource Group:
                <select path="groupCol">
                    <options items="${groupCols}" />
                </select>
            </td>
        </tr>
    </tbody>
    <tr class="addResRow">
        <td class="alignleft">ESX Type:
            <select path="esxType" id="esxType">
                <option value="NONE" label="--- Select ---" />
                <c:forEach items="${esxType}" var="typeVar">
                    <option value="${typeVar}">${typeVar}</option>
                </c:forEach>
            </select>
        </td>
        <td>&nbsp;</td>
        <td class="aligncenter">ESX Version:
            <select path="esxVersion" id="esxVersion">
                <option value="NONE" label="--- Select ---" />
                <c:forEach items="${esxVersionsPassed}" var="versionVar">
                    <option value="${versionVar}">${versionVar}</option>
                </c:forEach>
                <%-- <options items="${esxVer}" />--%></select>
            <errors path="esxVersion" cssClass="error" />
        </td>
        <td>&nbsp;</td>
        <td class="alignright">ESX Build:
            <select path="esxBuild" id="esxBuild">
                <option value="NONE" label="--- Select ---" />
                <%-- <options items="${esxBuild}" />--%></select>
            <errors path="esxBuild" cssClass="error" />
        </td>
    </tr>
    </tbody>
</table>

The reason behind it is width of left, center and right classes in your CSS. — divy3993, Sep 10 '15 at 14:33
Just try removing width temporary from one of the class. Here >> http://jsfiddle.net/mw307gqr/ — divy3993, Sep 10 '15 at 14:37
i would not use tables here - better use divs and make a grid. The handling here is much more flexible — messerbill, Sep 10 '15 at 14:37
you had a few errors in your table, ive fixed those and removed the unneeded CSS. See below. @Hip Hip Array — Aaron, Sep 10 '15 at 14:44

score 1 · Accepted Answer · answered Sep 10 '15 at 14:35

What about using divs?

HTML

<div class="box">
    <button id="gatherHostInfo" type="button">Gather Host<br />Info</button>
</div>
<div class="clear"></div>
<div class="box">
    <label>Host password:</label><input type="text" id="hostPassword" />
</div>
<div class="box">
    <label>Serial Number:</label><input path="serialNumber" size="30" />
</div>
<div class="clear"></div>
<div class="box">
    <label>Resource Name:</label><input path="resourceName" id="hName" size="30" />
</div>
<div class="box">
    <label>Resource Status:</label><select path="resourceStatus">
        <option value="Available" label="Available" />
        <option value="InActive" label="InActive" />
    </select>
</div>
<!-- CONTINUE WITH THESE BOXES -->

CSS

.box {
    width: 430px;
    margin: 5px 0;
    float:left;
}

.box label {
    width: 120px;
    padding-right: 10px;
    text-align: right;
    display:inline-block;
}

.clear {
    clear:both;
}

DEMO

but I want to have up to three `label:input` in a row. this seems to work well if you want all items in a straight line but I need three rows in the same format — Hip Hip Array, Sep 10 '15 at 14:37

score 0 · Answer 2 · answered Sep 10 '15 at 14:34

0

hello for one you should not use tables, but a quick and dirty fix would be to add

td{
    white-space:nowrap;
}

to your css. and make sure the table is large enough http://jsfiddle.net/qP46X/2277/

answered Sep 10 '15 at 14:34

Victor Radu

2,262
1
12
18

1

also floating td's has no effect – Victor Radu Sep 10 '15 at 14:35
this works but lines the items up from the left side, i need the `label:inputs`to be lined up where the `:` is – Hip Hip Array Sep 10 '15 at 14:39
as I said make sure your table is large enough so they fit next to each other, just drag your winow larder or zoom out or make the inputs smaller, http://jsfiddle.net/qP46X/2280/ – Victor Radu Sep 10 '15 at 14:43

score 0 · Answer 3 · answered Sep 10 '15 at 14:36

Instead of using columns and rows, try using form, label, input tags. For example:

 <form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

Two other words of advice: - You might want to look into a framework such as jquery which has a grid framework - If you right click on the element out of place and click "Select element" within Google chrome, you can try to dynamically change the styling and see if it correctly places the text

score 0 · Answer 4 · answered Sep 10 '15 at 14:39

you can use the div approach instead of the table approach like below:

.label {
    display:inline-block;
    text-align: right;
    width: 45%;
}
.field {
    display:inline-block;
    width: 50%;
}
.row {
    margin-bottom: 10px;
}
.left {
    width: 49%;
    display:inline-block;
}
.right {
    width: 49%;
    display:inline-block;
}

<div class="form">
    <div class="row">
        <div class="left">
            <div class="label">Some Field Here</div>
            <div class="field"><input type="text"/></div>
        </div>
         <div class="right">
             <div class="label">Some Here</div>
            <div class="field"><input type="text"/></div>
        </div>
    </div>
    <div class="row">
        <div class="left">
            <div class="label">Some Field Here</div>
            <div class="field"><input type="text"/></div>
        </div>
         <div class="right">
             <div class="label">Some Field Here</div>
             <div class="field"><select></select></div>
        </div>
    </div>
</div>

Aaron · Answer 5 · 2015-09-10T14:50:24.503

This should do what you need.

table {
  width: 100%;
  table-layout: fixed;
}
td > input {
  float: right; 
   width: 100px;
}
.alignleft {
  text-align: left;
}
.aligncenter {
  text-align: center;
}
.alignright {
  text-align: right;
}

<table class="striped" width="90%">
  <tbody>
    <tr>
      <td class="alignleft" colspan="2">Gather host info:
        <button id="gatherHostInfo" type="button">Gather Host Info
        </button>
      </td>
    </tr>

    <tr>
      <td class="alignleft">Host password:
        <input type="text" id="hostPassword" />
      </td>

      <td class="aligncenter">Serial Number:
        <input path="serialNumber" />
        <errors path="serialNumber" cssClass="error" />
      </td>
    </tr>

    <tr>
      <td class="alignleft">Resource Name:
        <input path="resourceName" id="hName" />
        <errors path="resourceName" cssClass="error" />
      </td>

      <td class="aligncenter">Resource Status:
        <select path="resourceStatus">
          <option value="Available" label="Available" />
          <option value="InActive" label="InActive" />
        </select>
      </td>
    </tr>

    <tr>
      <td class="alignleft">Primary Mgmt IP address:
        <input path="IPaddress" id="ip" />
      </td>

      <td class="aligncenter">VMKernel:
        <input path="VMKernel" />
    </tr>

    <tr>
      <td class="alignleft">Resource Group:
        <select path="groupCol">
          <options items="${groupCols}" />
        </select>
      </td>
    </tr>


    <tr>
      <td colspan="2">
        <table>
          <tr class="addResRow">
            <td class="alignleft">ESX Type:
              <select path="esxType" id="esxType">
                <option value="NONE" label="--- Select ---" />

                <c:forEach items="${esxType}" var="typeVar">
                  <option value="${typeVar}">${typeVar}</option>
                </c:forEach>
              </select>
            </td>

            <td class="aligncenter">ESX Version:
              <select path="esxVersion" id="esxVersion">
                <option value="NONE" label="--- Select ---" />
                <c:forEach items="${esxVersionsPassed}" var="versionVar">
                  <option value="${versionVar}">${versionVar}</option>
                </c:forEach>
                <%-- <options items="${esxVer}" />--%>
              </select>
              <errors path="esxVersion" cssClass="error" />
            </td>

            <td class="alignright" colspan="2">ESX Build:
              <select path="esxBuild" id="esxBuild">
                <option value="NONE" label="--- Select ---" />
                <%-- <options items="${esxBuild}" />--%>
              </select>
              <errors path="esxBuild" cssClass="error" />
            </td>

          </tr>
        </table>
      </td>
    </tr>

  </tbody>

</table>

score 0 · Answer 6 · answered Sep 10 '15 at 14:46

normally you would not use table. table is used to display data, not to ident your layout.

http://jsfiddle.net/kqg98a0c/1/

instead divs.

<form>
<div class="col right">
    <label for=password>Host Password:</label>
    <label for=resource>Resource Name:</label>
</div>
<div class=col>
    <input id=password type=password placeholder="type it please!" />
    <input id=resource type=text placeholder="type it please!" />
</div>
<div class="col right">
    <label for=serial>Serial Number:</label>
</div>
<div class=col>
     <input id=serial type=text placeholder="type it please!" />
</div>

.col {
    float:left;
}
.col+.col {
    margin:0 5px;
}
label, input {display:block}
.right {
    text-align:right;
}

HTML/CSS : Line up multiple Label and Input fields

6 Answers6