CODEWITHSUNDEEP
htmlcsstextareaalignment
nightsRey
nightsRey

Reputation: 124

Textarea is pushing down the element to the left of it?

I have the following layout: fiddle. 

<div>
<div class="left">
    <div>label not aligned</div>
</div>
<div class="right">
    <div><textarea></textarea></div>
</div>
</div>
<div>
<div class="left">
    <div>label aligned</div>
</div>
<div class="right">
    <div><input></input></div>
</div>
</div>
/*...css in the fiddle*/

In it you can see that there are 2 rows, one with a textarea and the other with an input for comparison. As you can see the first row's label is pushed down even if the line-height and height are the same as in the right column. In the 2nd row with the input you can see the behavior I was expecting where the label is essentially centered and in alignment with the input to the right. This occurs even if the textarea has resize none.

Does anyone know why this is happening? I know how to get it to work using float left but I wanted to know if there's a cleaner solution. Thanks in advance.

Upvotes: 1

Views: 1489

Answers (1)

Harry
Harry

Reputation: 89780

Add a vertical-align: top to your .left class like below:

.left{
    border: 1px solid black;
    vertical-align: top;
}

Updated Fiddle

Upvotes: 5

Related Questions