Aligning textbox and labels in html using css

Question

When I only have 1 label and 1 text box per line. I align them using float:left and float:right then squeeze them by using field set's width.

But what I need to do now is 3 labels and 3 text boxes per line. Any idea how to align them?

Edit: Ignore the name, I just copy pasted so they have same name LOL

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'>
    <legend>Add Hardware Availability</legend>
       <p>
          <label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'>
       </p>

       <p>
          <label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'>
       </p>

       <p>
          <label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'>
       </p>
</fieldset>

This is what I had in mind to happen

enter image description here

Current look without css

enter image description here

Dinei · Accepted Answer · 2015-06-15 03:10:17Z

3

I would suggest you to use one experienced framework that has this in the box, such as Bootstrap... But if you want to do it yourself, one possible approach is the following:

fieldset {
  width: 100%;
}
.row {
  width: 100%;
  clear: both;
}
.row div {
  width: 33%;
  float: left;
}
label {
  display: block;
  float: left;
  width: 40%;
  text-align:right;
}
input {
  width: 50%;
}

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'>
  <legend>Add Hardware Availability</legend>
  <div class="row">
    <div><label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div>
  </div>

  <div class="row">
    <div><label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div>
  </div>

  <div class="row">
    <div><label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'></div>
  </div>
</fieldset>

answered Jun 15, 2015 at 3:10

Dinei

5,7834 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aozora Over a year ago

Thanks this will do. I'm still a beginner in css so I don't know any framework. But first I will study the css code you've given me so I can know how did it happen. I like how the label sticks to the textboxes.

aozora Over a year ago

Just a bit more. I'm planning to make the reason text box span to the end. But now if I extend it, it goes down.

Dinei Over a year ago

To do it you need to put a custom class in the reason's container div and set some CSS to make it use 66% of the width instead of 33%. You will need to change the label's width too, because just increasing the size of the div will dishevel this label from the others, as it's size rely on percentages.

Collectives™ on Stack Overflow

Aligning textbox and labels in html using css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related