1. Home
  2. Forums Index
  3. Browser Side / CSS 12:30 pm May 21, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

can a textarea auto-fit within a div?

         

waveform

5:43 pm on Jul 24, 2010 (gmt 0)

10+ Year Member



I must be missing something obvious here, but it's doing my head in. 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:
[img44.imageshack.us...]
But what I'm getting is this:
[img691.imageshack.us...]

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? My html is below. Not sure what I'm doing wrong. 

<!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>


Cheers!

birdbrain

6:45 pm on Jul 24, 2010 (gmt 0)



Hi there waveform,

the reason why the textarea overflows the div element is that your arithmetic is incorrect. ;)

You set the textarea width to be 100% of the div width then added 20px's worth of border,
padding and margin to that value. :(

Here is the solution but bear in mind that I have left the textarea border in place and
adjusted the div's padding-right value to compensate.
If you want perfection then remove the textarea border and use uniform padding for the div. 


<!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=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container { 
width:488px;
padding:5px 7px 5px 5px; 
border:1px solid #808080;
}
#txtarea {
display:block;
width:99%;
padding:0.5%;
margin:0;
border:1px solid #f0f040;
background-color:#fffff0;
overflow:auto;
}
</style>

</head>
<body>

<div id="container">
<textarea id="txtarea" cols="1" rows="5">
</textarea>
</div>

</body>
</html>

Also note that you should really use a strict dtd instead of a transitional one as your
document does not contain any deprecated elements.

birdbrain

waveform

5:20 am on Jul 25, 2010 (gmt 0)

10+ Year Member



Thanks BB, that seems to work! Although I don't understand the 99% / 0.5% thing, it does seem to work out to the same physical gap on the right regardless of the width of the div, which is what I was after. Thank you muchly!

Thank god CSS3 is introducing flexible box models, because (imo) content-box makes simple design needs way too complicated!

birdbrain

8:55 am on Jul 25, 2010 (gmt 0)



Hi there waveform,

Although I don't understand the 99% / 0.5%....

If you require an element to have padding and to be the same width as it's
containing element without defining it's units, then the percentage values
must add up 100% - ( width:99% + padding-right:0.5% + padding-left:0.5% ).

This would work well if you were likely to change the width of the containing
element as you would not need to change the values of the inner element.

If you were not going to change the width of the containing element, it could
simply have been coded like this... 


<!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=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
width:490px;
padding:5px;
border:1px solid #808080;
}
#txtarea {
display:block;
width:480px;
padding:4px;
margin:0;
border:1px solid #f0f040;
background-color:#fffff0;
overflow:auto;
}
</style>

</head>
<body>

<div id="container">
<textarea id="txtarea" cols="1" rows="5">
</textarea>
</div>

</body>
</html>


birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:30 pm May 21, 2026