CODEWITHSUNDEEP
htmlcss
user7648646
user7648646

Reputation:

CSS styling help for my form input

HTML FILE 

<label for = "about"> About:</label>         
<textarea name="message" class="text" required></textarea>

CSS FILE

    label {
    display: inline-block;
    float: left;
    width: 90px;
    }

I need a CSS file to move the ABOUT: text to the bottom left of the text box

enter image description here

I need CSS to make it look this way

How it should look after CSS

Upvotes: 0

Views: 56

Answers (3)

Naren Murali
Naren Murali

Reputation: 58767

There is no need for float:left, I used vertical-align:bottom; for placing the label at the bottom and added some margin to the element! 

label {
  vertical-align: bottom;
  width: 90px;
  display: inline-block;
  margin-bottom:3px;
}
<div class="wrapper">
  <label for="about"> About:</label>
  <textarea name="message" class="text" required></textarea>
</div>

References:

  1. CSS vertical-align

Upvotes: 1

kyun
kyun

Reputation: 10304

.container{
  display: flex;
  align-items: flex-end;
}
label {
  /* display: inline-block;
  float: left; */
  width: 90px;
}
<div class="container">
  <label for="about"> About:</label>
  <textarea name="message" class="text" required></textarea>
</div>

Try to use display: flex;

Upvotes: 1

Billy Ferguson
Billy Ferguson

Reputation: 1439

You need to stick it to the bottom of that section. I like to do that with position: absolute and bottom: 0;. There is no need to add extra div as you can just do it with those two properties.

label {
  display: inline-block;
  position: absolute:
  float: left;
  bottom: 0;
  width: 90px;
}

https://jsfiddle.net/9yf4wumd/

Upvotes: 0

Related Questions