CODEWITHSUNDEEP
htmlcssforms
Darius
Darius

Reputation: 33

Label sticking next to another label

I am having a simple registration form, but one of the label fields sticks next to another label field.

Currently it looks like this: enter image description here

Email should be under the Username, not next to it. Other form elements align nicely, but not these two.

label {
  float: left;
}

input {
  float: right;
}
<div class="form-wrapper">
  <div>
    <div>
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div>
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1130

Answers (3)

collapsar
collapsar

Reputation: 17238

Labels and input fields are stacked from the left and the right, resp., due to the css float properties. Note that the label/input pairs render on individual lines when removing the css, though without proper vertical alignment.

The CSS display: table property and friends can be employed to rectify this. Basically they cause the renderer to apply table layouting to elements other than tableand descendants.

.d-t {
  display: table;
}

.d-tr {
  display: table-row;
}

.d-tr > label, .d-tr > input {
  display: table-cell;
}
<div class="form-wrapper">
  <div class="d-t">
    <div class="d-tr">
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div class="d-tr">
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7066

Why don't you just use flex, clean and less code.

.form-wrapper {
  width: 400px;
  border: 1px solid blue;
}

.username,
.useremail {
  display: flex;
  margin: 10px;
  width: 350px;
  justify-content: space-between;
  font-weight: bold;
}
<div class="form-wrapper">
  <div>
    <div class="username">
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div class="useremail">
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Upvotes: 2

Ravichandran
Ravichandran

Reputation: 1039

If you are going with float you have to know about using clear property for it's next elements. So a best way to handle is, to create a after pseudo-element on the parent and clear:both.

In the below code have added 'field' class for each container and styled it with :after.

.field::after{
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

label {
  float: left;
}

input {
  float: right;
}
<div class="form-wrapper">
  <div>
    <div class="field">
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div class="field">
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions