CODEWITHSUNDEEP
htmlcss
user2827773
user2827773

Reputation: 21

html & css form not lining up

I'm trying to put a comment box within a table (As per assignment request) and my cursor position is in the middle of the box, rather than the top left as it should be.

HTML code:

<tr>
<td>Comments: <input id="comment" type="text" name="Comment" class="comment"/></td>
</tr>

CSS code:

#comment {
float: right; 
display: block; 
padding-right: 10px; 
width:70%;
height:100px;
}

Upvotes: 0

Views: 77

Answers (3)

S&#233;bastien
S&#233;bastien

Reputation: 12139

input is used for single line input, so it behaves like an inline element by default and the text line is vertically centered. Basically in that tall box you can only have one line even if you increase the height in CSS. Go ahead and try to type in a line break.

So you might be better off using a textarea instead, like:

<td>Comments: <textarea id="comment" name="Comment" class="comment">Some text</textarea></td>

Notice that the content in enclosed in the open and close tags instead of in the value attribute.

Also note that you do not need the "comment" class (class="comment") if you do not plan to use it in CSS or in JavaScript.

Upvotes: 0

OriShuss
OriShuss

Reputation: 269

This happens with the 'input' tag. You should use a textarea instead.

<td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>

Upvotes: 0

kunalbhat
kunalbhat

Reputation: 1719

Try using a textarea instead of normal input for multi-line input. I think that is the behavior you are expecting.

<tr>
  <td>Comments: <textarea id="comment" name="Comment" class="comment"></textarea></td>
</tr>

Working example

Upvotes: 2

Related Questions