CODEWITHSUNDEEP
cssformscss-float
Nathan Osman
Nathan Osman

Reputation: 73295

How to float a <label> to the left of an <input>?

Consider the following HTML/CSS:

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}
  
.field label {
  float: left;
  width: 80px;
}

.field input {
  display: block;
  width: 100%;
}
<div class="field">
  <label>Test</label>
  <input type="text">
</div>

On both Firefox and Chromium, the result ends up looking like this:

label above text input

Instead, I would like the <input> to appear on the same line as the <label>. In other words, something like this:

label beside text input

Why isn't float: left; causing the label to appear to the left of the input?

Upvotes: 2

Views: 11939

Answers (4)

Jason W
Jason W

Reputation: 13209

By making the width of the text input 100% and a block, the text box takes the entire width of the line thus pushing the textbox onto the second line. There are many methods of doing what you are attempting. One method - if you change the text input to a fixed width (pixel or smaller than 100%), you should get the desired results.

.field label {
  float: left;
  width: 20%;
}
.field input {
  display: block;
  width: 80%;
}

UPDATE

I saw you responded to another answer where you intended to keep the 100% width on the input. You can accomplish this and not arbitrarily select a fixed width by using the table/table-cell css classes. The field must be full width and defined as a table. The float must be removed, then the label/input be table-cells.

.field {
    display: table;
    width: 100%;
}

.field > label,
.field > input {
    display: table-cell;
}

.field > input {
    width: 100%;
}

Fiddle: http://jsfiddle.net/1rhtgzf0/1/

Upvotes: 5

rze
rze

Reputation: 248

You're close. Remember that a label and input are two separate boxes. You set width in .field input to 100%. By setting the width of the input textbox to 100%, you're taking up 100% of that space that the label and textbox would share. This results in forcing the input textbox to be beneath the label. By setting float:left; to input and removing 100% from .field input, it'll work.

Here's the solution I came up with.

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}

.field label {
  float: left;
  text-align:right;
  width: 80px;
}

.field input{
  float:left;
}

<div class="field">
   <label>Test</label>
   <input type="text">
</div>`

Upvotes: 0

csteel
csteel

Reputation: 393

Took a note from Bootstrap (http://www.getbootstrap.com):

.field {
    border-collapse: separate;
    display: table;
    position: relative;
    width: 400px;
}

label {
    display: table-cell;
    width: 1%;
}
input {
    display: table-cell;
    float: left;
    position: relative;
    width: 100%;
}
<div class="field">
  <label>Test</label>
  <input type="text">
</div>

Upvotes: 1

Leo Javier
Leo Javier

Reputation: 1403

Yo need to leave some space to your layout...

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}

.field label {
  float: left;
  width: 10%;
}

.field input {
  display: block;
  width: 90%;
}

Upvotes: 0

Related Questions