Tips for positioning a label and text box side-by-side using HTML?

Question

Tips for positioning a label and text box side-by-side using HTML?

Looking at the code below, I see that the summary and its text box are aligned inline, but the description text box is appearing below the label 'description'. How can I make it align inline as well? Any suggestions on how to fix this issue would be greatly appreciated.

    .left {
      width: 30%;
      float: left;
      text-align: right;
    }
    .right {
      width: 65%;
      margin-left: 10px;
      float: left;
    }

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
        <h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
        <form action="post" class="login-form">
          <div>
            <label class="left">Summary:</label>
            <input class="right" type="text" name="Summary" size="50">
          </div>
          <div>
            <label class="left">Description:</label>
            <input class="right" type="text" name="Description" style="height:100px;width:400px">
          </div>
        </form>
      </div>
    </div>
  </div>

html css

Answer 1

Answer №1

Here's a helpful suggestion: Check out the demo

If you require a multi-line text box, consider using textarea instead of an input type with text

    <div class="form-group row">
    <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
      <div class="col-md-6 col-sm-12">
        <input type="text" class="form-control" name="Summary" size="50">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
      <div class="col-md-6 col-sm-12">
        <textarea class="form-control" name="Description"></textarea>
      </div>
    </div>

Edit:

Just a note, it should be the form-control-label class, not the form-control class.. Additional information can be found here

Updated Demo: To adjust the height, experiment with changing the value of rows="8" for <textarea>

Answer 2

Here's a helpful suggestion: Check out the demo

If you require a multi-line text box, consider using textarea instead of an input type with text

    <div class="form-group row">
    <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
      <div class="col-md-6 col-sm-12">
        <input type="text" class="form-control" name="Summary" size="50">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
      <div class="col-md-6 col-sm-12">
        <textarea class="form-control" name="Description"></textarea>
      </div>
    </div>

Edit:

Just a note, it should be the form-control-label class, not the form-control class.. Additional information can be found here

Updated Demo: To adjust the height, experiment with changing the value of rows="8" for <textarea>

Answer 3

Answer №2

If you're utilizing Bootstrap (as evidenced by the classes in your code), I suggest taking advantage of their form layout options. It seems like a Horizontal Form would suit your needs:

Documentation

Here's an example:

<form class="form-horizontal">
  <div class="form-group">
    <label for="summary" class="col-sm-2 control-label">Summary</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="summary" />
    </div>
  </div>
  <div class="form-group">
    <label for="description" class="col-sm-2 control-label">Description</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="description" style="height:100px;width:400px" />
    </div>
  </div>      
</form>

Answer 4

If you're utilizing Bootstrap (as evidenced by the classes in your code), I suggest taking advantage of their form layout options. It seems like a Horizontal Form would suit your needs:

Documentation

Here's an example:

<form class="form-horizontal">
  <div class="form-group">
    <label for="summary" class="col-sm-2 control-label">Summary</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="summary" />
    </div>
  </div>
  <div class="form-group">
    <label for="description" class="col-sm-2 control-label">Description</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="description" style="height:100px;width:400px" />
    </div>
  </div>      
</form>

Answer 5

Answer №3

<textarea class="right" name="Description" style="height:100px;"></textarea>

Update the description input to a textarea with a height of 100px.

Answer 6

<textarea class="right" name="Description" style="height:100px;"></textarea>

Update the description input to a textarea with a height of 100px.

Answer 7

Answer №4

If you've already incorporated the bootstrap framework, there's no need to add extra CSS for inline forms. Simply use the code below:

<div class="form-group">
     <label class="col-lg-3 control-label ">City</label>
      <div class="col-lg-9">
        <div class="form-inline">
          <div class="form-group ">
            <div class="col-lg-12">
              <label class="sr-only" for="city">City</label> 
              <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
            </div>
          </div> 
          <div class="form-group ">
            <div class="col-lg-12">
              <label class="sr-only" for="county">County</label> 
              <input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 8

If you've already incorporated the bootstrap framework, there's no need to add extra CSS for inline forms. Simply use the code below:

<div class="form-group">
     <label class="col-lg-3 control-label ">City</label>
      <div class="col-lg-9">
        <div class="form-inline">
          <div class="form-group ">
            <div class="col-lg-12">
              <label class="sr-only" for="city">City</label> 
              <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
            </div>
          </div> 
          <div class="form-group ">
            <div class="col-lg-12">
              <label class="sr-only" for="county">County</label> 
              <input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 9

Answer №5

Does this look good to you?
https://jsfiddle.net/abcdef123/

.top {
  width: 40%;
  display: inline-block;
  text-align: center;
}
.bottom {
  width: 55%;
  margin-left: 15px;
  display: inline-block;
}

Answer 10

Does this look good to you?
https://jsfiddle.net/abcdef123/

.top {
  width: 40%;
  display: inline-block;
  text-align: center;
}
.bottom {
  width: 55%;
  margin-left: 15px;
  display: inline-block;
}

Answer 11

Answer №6

give this a shot:

<html>
  <head>
    <title>example</title>
    <style type="text/css">
      .left {
          width: 30%;
          display: inline-block;
          text-align: right
      }
      .right {
          margin-left: 10px;
          display: inline-block;
      }
    </style>

  </head>

  <body>
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
            <h1 class="text-center" style="font-family:Colonna MT;font-                    size:50px;color:ForestGreen ; text-align: center">Submit Your Form</h1>
 <form action="post" class="login-form">
      <div>
        <label class="left">Title:</label>
        <input class="right" type="text" name="Title" size="50" style="width:400px">
      </div>
    <div>
       <label class="left">Message:</label>       
       <input class="right" type="text" name="Message" style="height:100px;width:400px">
   </div>
 </form>
  </div>
</div>
</div>
</body>
</html>

Answer 12

give this a shot:

<html>
  <head>
    <title>example</title>
    <style type="text/css">
      .left {
          width: 30%;
          display: inline-block;
          text-align: right
      }
      .right {
          margin-left: 10px;
          display: inline-block;
      }
    </style>

  </head>

  <body>
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
            <h1 class="text-center" style="font-family:Colonna MT;font-                    size:50px;color:ForestGreen ; text-align: center">Submit Your Form</h1>
 <form action="post" class="login-form">
      <div>
        <label class="left">Title:</label>
        <input class="right" type="text" name="Title" size="50" style="width:400px">
      </div>
    <div>
       <label class="left">Message:</label>       
       <input class="right" type="text" name="Message" style="height:100px;width:400px">
   </div>
 </form>
  </div>
</div>
</div>
</body>
</html>

Answer 13

Answer №7

If you're having trouble positioning it correctly, there is an alternative to using tables for layout:

.login-form {
    display: table;
}
.login-form>div {
    display: table-row;
}

.cell {
    display:table-cell;
    vertical-align: top;
}
...

To enhance the structure, wrap the inputs in a div and apply a "cell" class (maybe consider using a textarea instead):

...
<form action="post" class="login-form">
    <div>
        <label class="left cell">Summary:</label>
        <div class="cell">
            <input class="right" type="text" name="Summary" size="50">
        </div>
    </div>
    <div>
        <label class="left cell">Description:</label>
        <div class="cell">
            <textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
       </div>
   </div>
</form>
...

Take a look here

Answer 14

If you're having trouble positioning it correctly, there is an alternative to using tables for layout:

.login-form {
    display: table;
}
.login-form>div {
    display: table-row;
}

.cell {
    display:table-cell;
    vertical-align: top;
}
...

To enhance the structure, wrap the inputs in a div and apply a "cell" class (maybe consider using a textarea instead):

...
<form action="post" class="login-form">
    <div>
        <label class="left cell">Summary:</label>
        <div class="cell">
            <input class="right" type="text" name="Summary" size="50">
        </div>
    </div>
    <div>
        <label class="left cell">Description:</label>
        <div class="cell">
            <textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
       </div>
   </div>
</form>
...

Take a look here

Answer 15

Answer №8

Eliminate the style attribute from the description input field to transform it into a summary input box.

<form action="post" class="login-form">
  <div>
    <label class="left">Summary:</label>
    <input class="right" type="text" name="Summary" size="50" style="width:400px">
  </div>
<div>
   <label class="left">Description:</label>       
   <input class="right" type="text" name="Description">

Answer 16

Eliminate the style attribute from the description input field to transform it into a summary input box.

<form action="post" class="login-form">
  <div>
    <label class="left">Summary:</label>
    <input class="right" type="text" name="Summary" size="50" style="width:400px">
  </div>
<div>
   <label class="left">Description:</label>       
   <input class="right" type="text" name="Description">

Tips for positioning a label and text box side-by-side using HTML?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

What could be the reason that angularjs html template requests aren't appearing in the top websites when viewed in a

What is causing Firefox to display an additional line in this section?

Having trouble making an HTML5 video work on Android? It seems to play fine when clicking the play button,

The presence of the WordPress admin bar results in extra whitespace on the page, while including

Issues arise with the layout when using Twitter Bootstrap as adding an extra column causes the main menu to be concealed

CSS styling not appearing on HTML button

What is the best way to activate a function once two HTML elements have been completed?

Steps to toggle text color upon clicking and switch the color of another text

Express template failing to connect with scripts, css, and images

Using JQuery to eliminate the current div in an image slider

How can I prevent Bootstrap from disrupting my CSS layout and what steps can I take to rectify the issue?

Sometimes, the page-wide background in Internet Explorer doesn't load properly

What is the best way to anchor floating labels in React while incorporating Tailwind CSS?

Extract all information from the HTML table and store it in an array

Employing featherlightGallery.js without the need for anchor tags

Implementing a Scroll-down Functionality for Drop-down Menu Choices with the Power of CSS and HTML

Angular ngx-translate - Setting a fallback value for untranslated parameters in translation strings

Is there a way to make negative numbers in a JSON response from JS turn red easily?

Generating Dynamic Widgets Within the Document Object Model

What is the best way to retrieve information from a data set?