How To Adjust Textarea Label Position Without Table

If a label is placed next to a textarea the text will be place at the bottom line. Often this don’t look good. In this tutorial I will show how you can have the label placed anywhere along side the textarea as shown below.

The reason why I am writing this post is because when I searched for this solution I came across expert-exchange solution. But I couldn’t see the solution because I had to pay to see it. So I decided to find a solution myself. The solution is very simple, it’s simply using the positioning technique in CSS.

The code that I used for my comment section is as follows.

Comment

and the CSS styling is as follows. The ‘top’ position can be altered to adjust the label position.

.comment-form-comment {
   position:relative;
}

label[for="comment"] {
   position:absolute;
   top:5px;
}

Read CSS positioning techniques for more details.