can a textarea auto-fit within a div?

[ghiblifan]

I must be missing something obvious here, but can’t work it out. 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:
[img]http://img44.imageshack.us/img44/1007/boxdiv1.gif[/img]
But what I’m getting is this:
[img]http://img691.imageshack.us/img691/8113/boxdiv2.gif[/img]

I’ve tried various combinations of margin & padding for both the div and textarea, but it doesn’t want to fit. 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?

Code:

<br /> text box with padding and margin inside a fixed width div.<br /> how do I made the text box auto-fit nicely inside the div?<br />

Cheers!

[Chris Coyier]

The problem is likely that you’ve set the text area width to 100% and also added padding. You can try removing the padding, but that’s often not ideal. Is it common that the parent element of the text area changes in width? If not, skip the % width and set it statically.

[Makeshift]

Yeah, and when you set it statically, don-t forget to subtract the padding for each side.

[ghiblifan]

"chriscoyier" wrote:

Is it common that the parent element of the text area changes in width? If not, skip the % width and set it statically.

Thanks, but yes it does in a way.. I wanted to just set a single style to apply to all textareas, so wherever they appear, they end up being as big as their container allows. So it will be various widths at various times. Regardless, I thought dynamic resizing was easy to do in CSS, but the content-box model makes it damn difficult.

Thank god CSS3 is formalising border-box as an options. I can see lots of people wanting to use it for web apps. Apps are often different animals to normal pages, and we need good design tools to make them app-like. W3C is on another planet in that respect.

[Author]

Posts