Making a textarea auto-fit inside a div

This should be so simple, I must be missing something really obvious here. In the html below, which is a simple textarea inside a fixed-width DIV, I want to make the textarea fit itself width-wise within the width of the div, with a nice little margin around the outside.

The result I want is this:

But what I’m getting is this:

Can someone advise me as to what the correct css should be, so the textarea resizes to the width of the div, with a 5px margin around the edge?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <style>
      #container { border: 1px solid #808080; width: 500px }
      #txtarea { border: 1px solid #f0f040; background-color: #fffff0; width: 100%; padding: 4px; margin: 5px; }
    </style>
  </head>

  <body>
    <div id="container">
      <textarea id="txtarea" cols="50" rows="5">
        text box with padding and margin inside a fixed width div.
        how do I made the text box auto-fit nicely inside the div?
      </textarea>
    </div>
  </body>

</html>

Well, this is happening because you’ve set it to 100% of the width, when you want it to be less than that. Plus, the padding actually adds to the width. So you just need to make it less than 100%. I would use px, since that’s what you use. I might be wrong, but I think it should be 482px wide. Try that.

Thanks Raffles. That number of pixels is just used as an example. I want to set a style for the textarea which will result in it fitting nicely within any width of its parent. Can CSS actually do this? If not that would be pretty lame. :slight_smile:

Hi,
It can be done with CSS3’s box-sizing property. You would set the value to border-box and then it will account for the borders and padding (everything from the outer points of the border inward). It will not account for margins on the textarea so that would have to be simulated with padding on the parent.

It will work in all major browsers except IE6/7. You might be able to script them according to the parent width.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Auto-Width Textarea</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100&#37;/1.4 arial,helvetica,sans-serif;
    background:#DDD;
}
h1 {
    font-size:1.5em;
    text-align:center;
}
#wrap {
    width:50%;
    margin:20px auto;
    padding:5px;/*workaround for textarea margin*/
    background:#FFF;
    border:1px solid #808080;
}
#textbox {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:block;/*reset from inline*/
    width:100%;
    margin:0;/*remove defaults*/
    padding:4px;
    background:#EEF;
    border:1px solid #333;
    overflow-y:auto;/*resets IE*/
    overflow-x:hidden;/*resets IE*/
}
* html #txtarea {margin-left:-5px}/*ie6 cheap fix*/
*+html #txtarea {margin-left:-5px}/*ie7 cheap fix*/
</style>

</head>
<body>
<h1>Auto-Width Textarea</h1>
<div id="wrap">
<textarea id="textbox" cols="50" rows="5">
Text box with padding &amp; margin inside a fixed width div.
How do I make the text box auto-fit nicely inside the div?

CSS3 box-sizing property to the rescue!
</textarea>
</div>

</body>
</html>

The only other solution is to set the width to something like 99% and see if that looks “OK”.

Or, I just tried this and it seems acceptable if you can put up with not having padding on the textarea:

div {
  border:1px solid red;
  padding:5px;
}
textarea {
  width:100%;
  border:1px solid blue
}

Admittedly the gap on the right is smaller so it doesn’t look perfect. Another alternative is to have two wrapping DIVs, and no border on the textarea. This allows there to be “padding” for the textarea. So if you’re happy to put up with the extra markup:

#div1 {
  border:1px solid red;
  padding:5px;
  background:white;
}
#div2 {
  border:1px solid blue;
  padding:5px;
  background:white;
}
textarea {
  width:100%;
  border:0
}