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
  • 341 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by davecoventry
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.