CODEWITHSUNDEEP
html
user6369806
user6369806

Reputation:

How do I align the label and input in a one line?

Above is my form: enter image description here

I want the label category to be horizontally at par with Select Category drop down. Same for other form items.

Here's my CSS:

.labelContainer {
  clear: both;
  float: left;
  width: 200px;

}

.inputContainer {
  clear:left;
  float: left;
  width: 200px;
}

And some of my HTML:

<div class="labelContainer">
            <label for="Date">Date</label>
        </div>

        <div class="inputContainer">
        <input type="text" id="datepicker" name="datepicker"/>
        </div>

Upvotes: 1

Views: 113

Answers (3)

xjmdoo
xjmdoo

Reputation: 1736

The clear: left on you .inputContainer prevents the two divs to be next to each other.

HTML:

<div class="labelContainer">
    <label for="Date">Date</label>
</div>
<div class="inputContainer">
    <input type="text" id="datepicker" name="datepicker"/>
</div>
<div class='clearfix'></div>

CSS:

.labelContainer {
  float: left;
  width: 200px;
}

.inputContainer {
  float: left;
  width: 200px;
}

.clearfix {
  clear: both;
}

You can check it here: jsfiddle.

Upvotes: 1

Nicolas P.
Nicolas P.

Reputation: 84

Remove the clear:left from the .inputContainer class CSS :

CSS:

.labelContainer {
  clear: both;
  float: left;
  width: 200px;
}

.inputContainer {
  float: left;
  width: 200px;
}

Upvotes: 0

Steve
Steve

Reputation: 142

Use positioning to position your select menu 

.inputContainer{
        position:relative;
        bottom:10px;
        left:20px;
}

Upvotes: 0

Related Questions