how do i align textarea field in line with the width of textbox fields in an html form?

i was designing a webpage form which has couple of textboxes and textarea fields in it, and noticed that certain alignment issues with these fields.

The code is as below -

<textarea rows="4" cols="30" name="details"></textarea>
<input type="text" name=开发者_Go百科"username" size="30"></input>

Although both fields have col width set to 30, i see that the textarea width extends over the width of the textbox. I used overflow:hidden using css for the textarea field, and then tried resizing it using the cols property set to 25, 26 etc.., but still see that the alignment is not perfect (though very close).

Question - Is there a better way to align all the fields in the form to have a standard width of say 30cols?

Using CSS to style the elements is the usual way:

<textarea style="width:400px;" rows="4" cols="30" name="details"></textarea><br/>
<input  style="width:400px;" type="text" name="username" size="30"/>

I'm using inline styles as example only, you'd want to assign classes, use a stylesheet, etc. Plus I fixed the typo on the text input element as it is a self closing tag.

Good luck!

Try adding this to your css stylesheet:

textarea#styled {
    width: 600px;
}

Then add the id to your textarea:

<textarea rows="4" id="styled" name="details"></textarea>

You could also try putting both of these elements inside of an html table with the table's alignment set to middle.