0

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
37
Views
2 Years
Discussion Span
Last Post by davecoventry
0

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>
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.