Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Full Width Textareas

By  on  

Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily there's a quick CSS solution to this problem!

View Demo

The CSS

box-sizing to the rescue!

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;
}
View Demo

Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means.  If the box-sizing were content-box, the textarea would continue to stretch outside the parent container as it would have before.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...

  • By
    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

Discussion

  1. David

    Very nice. I’ve struggled with this in the past. Top tip

  2. Petr Jirasek

    Great tip. Thanks.

  3. Maidul

    Great tip.
    Is it support in all browser?

  4. brett

    last I checked, ie9 did not support this, but i think ie10 had plans to

  5. Andy

    Actually it is quite well supported :
    Firefox, Opera, Safari, Chrome, IE8+

    See : http://caniuse.com/#feat=css3-boxsizing

  6. Damon Sharp

    See this Paul Irish link…

    http://paulirish.com/2012/box-sizing-border-box-ftw/

    Helps tremendously with mobile development as well and calculation of % width when utilizing this box-sizing.

  7. Tom

    Does not work for me (Win7, Firefox 15.0.1)

  8. Andy

    I use Win7 64bits and tested with Firefox 15.0.1, IE9, Safari and Chrome. All working fine
    Be sure to use all 3 declarations for maximum compatibility:

    -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
  9. Lucas Campelo

    Does not work for me too (Mac OS X, Chrome 26)

  10. Arpan Das

    Hmm… nice, I got saved! thanks for sharing :D

  11. wisnu

    Nice, it works…

  12. Ali

    Hi David! First i should say thanks about what you have written, I have question, i have done whatever you said but i wanna get some space from around of its parent tag, and i gave it margin:10px . But it doesn’t work ! Why?

  13. Alf

    Doesn’t work for me (Windows 7 + Chrome 46.0.2490.80 m)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!