Textareas with a 100% width and no overflow

After a poke-around in the Facebook source code a colleague of mine found this awesome little technique to get textareas with a width of 100% to behave exactly as you want them to.

If you just slam { width:100% } on the textarea you usually end up with a textarea that overflows its container. That since the textarea’s width will be 100% + padding + borders. You need to counter the padding and borders.
The absolute easiest way to do that is to add padding to the wrapping element.
 <!doctype html>  
    <html lang="en">
    <head>
     <style>
      label { padding: 0; marign: 0; display: block; }
      textarea { width: 100%; border: 1px solid #333; padding: 4px; }
       .fix { padding–right: 10px; }
     </style>
     
    </head>
     
    <body>
     <label class="fix">
      Entry:
      <textarea></textarea>
     </label>
    </body>
    </html>
The width of the input is 100% of its container + 1px + 1px (borders) + 4px + 4px (padding). In other words the width is 100% + 10px; Therefore we give the fix class an extra 10px padding to the right.
0 Comments for "Textareas with a 100% width and no overflow"
Back To Top