Reputation:
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
I need CSS to make it look this way
Upvotes: 0
Views: 56
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:
Upvotes: 1
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
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