15

What's the difference between sizing a textarea with cols and rows and sizing a textarea with height and width?

<textarea id="TextArea1" cols="73" rows="12">with cols rows</textarea>
<textarea id="TextArea2" style="height:200px; width:600px";>with CSS</textarea>

jsFiddle

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
frenchie
  • 51,731
  • 109
  • 304
  • 510
  • 1
    possible duplicate of [Is it better to size a textarea with CSS width / height or HTML cols / rows attributes?](http://stackoverflow.com/questions/3896537/is-it-better-to-size-a-textarea-with-css-width-height-or-html-cols-rows-attr) – Ciro Santilli OurBigBook.com Jul 13 '14 at 15:32

3 Answers3

14

cols and rows are relative to font size. height and width aren't.

http://jsfiddle.net/rVUEE/1/

EDIT: Saying they are relative to "font size" is a bit too simplistic. They take into account things such as line-height and letter-spacing if explicitly set as well.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
5
  1. The cols and rows attributes were required by HTML specifications. W3C HTML5 (approved in 2014) made them optional, but with impractical default values (20 and 2).
  2. The attributes take effect even when CSS is disabled.
  3. On the other hand, the attributes “lose” if dimensions are also specified in CSS.
  4. The rows attribute specifies the height in terms of lines (effectively, with the line height as implied unit), and the cols attribute specifies the width in terms of “average” character width, a very vague concept, interpreted very differently by browsers. In CSS, any CSS units can be used and must be explicitly specified.
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

CSS isn't that different. The result will be (almost) the same.

I'm using most of the time max-width, min-width and the same for height. In new browsers like Chrome you can resize the textarea.

Beko1997
  • 128
  • 1
  • 1
  • 9