Member Avatar for davecoventry

I have a form which has a series of label/input pairs.

I'm trying to get these to line up.

It's quite simple in tables: you just layout the table as follows:

<table><tr><td>Your name</td><td><input name="name" type="text" /></td></tr>
<tr>...</tr></table>

If I try the same thing with CSS:

<div class="row">
  <lable class="label-left">Name</div>
  <div class="input-right"><input name="name" type="text" /></div>
</div>
<div class="row">
  <lable class="label-left">...</div>
  <div class="input-right"><input name="foo" type="text" /></div>
</div>



.row{
  float: left;
  clear: both;
  width: 100%;
  padding: 8px;
  overflow: hidden;
}
.label-left{
  float: left;
  clear: both;
}
.input-right{
  float: right;
  clear: both;
}

The rows are presented as boxes with the label at the top left hand corner and the input box at the bottom right.

I'd like the row to have the elements displayed as a row.

  • 2 Contributors
  • 3 Replies
  • 364 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by davecoventry

Dani AI

Generated

Quick diagnosis: two separate problems are causing the rows to stack. The HTML sample contains a typo/mismatched tags (you used <lable> and closed it with </div>), which can break the DOM and how CSS applies. In the CSS you applied clear: both to the floated children — clearing a float on the element you just floated forces it to start below previous floats, so they will not sit side-by-side. Finally, when percent widths plus padding/borders are used with the default box-sizing: content-box, the padding is added on top of the width and can push columns past 100%, forcing a wrap. ’s float approach is valid if floats are used without those clears, but using Flexbox or Grid is much simpler and more robust today.

A minimal, modern approach (no floats) — replace the broken markup, keep labels accessible, and use Flexbox:

<form>
  <div class="row">
    <label class="label-left" for="name">Name</label>
    <div class="input-right"><input id="name" name="name" type="text"></div>
  </div>
</form>

<style>
.row { display:flex; align-items:center; gap:8px; }
.label-left { width:140px; text-align:right; padding-right:8px; box-sizing:border-box; }
.input-right { flex:1; }
</style>

Troubleshooting checklist:

  • Validate and fix HTML first (typos like lable and wrong closing tags will break layout).
  • Remove clear from floated children; if you must use floats, clear the container (clearfix or overflow:auto) instead.
  • If you stick with percent widths, either use box-sizing: border-box or reduce widths to account for padding/border (or use calc()).
  • Use browser devtools: inspect computed widths, toggle box-sizing, and temporarily add outlines/backgrounds to see where elements overflow.

If you plan three columns later, keep the label column fixed and let the inputs be flexible (Flexbox) or define grid-template-columns: 140px 1fr 120px with CSS Grid for more complex layouts. This addresses the specific bugs in ’s sample and complements ’s float-based answer.

Recommended Answers

All 3 Replies

Member Avatar for rtrethewey

This is a simple example of aligning label and input tags. I made .row a container with a "clearFix" :after rule addition so that you could adapt the code to your needs a bit easier.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Aligning Label and Input Tags</title>
<style type="text/css">
* { margin:0; padding:0; box-sizing:border-box; }

    #myForm { margin:0 auto; width:80%; }
    .row{
      width: 100%;
      overflow: hidden;
    }
    .row:after {
    content:' ';
    display:block;
    visibility:hidden;
    height:0;
    clear:both;
    line-height:0;
}
    .label-left{
      float:left;
      width:40%;
      padding:2px 4px;
      text-align:right;
      background-color:#eee;
    }
    .input-right{
      float:left;
      width:60%;
      padding:2px 4px;
      background-color:#ffffd8;
    }
</style>
</head>
<body>
<h1>Aligned Label and Input Tags Using CSS Float</h1>
<br>
<form id="myForm">
    <div class="row">
      <div class="label-left"><label for="name">Name</label></div>
      <div class="input-right"><input name="name" type="text"></div>
    </div>
    <div class="row">
      <div class="label-left"><label for="foo">Foo</label></div>
      <div class="input-right"><input name="foo" type="text"></div>
    </div>
</form>
<br>
</body>
</html>
Member Avatar for davecoventry

Thanks for responding.

If I strip your style definition down to this:

* { margin:0; padding:0; box-sizing:border-box; }
    .label-left{
      float:left;
      width:40%;
      padding:2px 4px;
      text-align:right;
      background-color:#aaa;
    }
    .input-right{
      float:left;
      width:60%;
      padding:2px 4px;
      background-color:#288;
    }

Then it gives me roughly what I want.

However, if I remove the line: * { margin:0; padding:0; box-sizing:border-box; } it kills the formatting and the page is rendered with each element on a new line.

It would seem that the css definition box-sizing:border-box; is the element which controls this and, if I add that definition to both the "label-left" and the "input-right" classes then the display is (almost) as desired.

I'm probably going to want to implement a similar formatting, perhaps with a row of three columns, in the future and I'd like to know which CSS style elements control this and how.

Member Avatar for davecoventry

For anybody looking for answers on this topic, I've found this, which explains it pretty well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.