Dynamic, stretchy and snug parent containers?

[glz]

Hi, I asked before about trying to get approximate pixels for width & height of a single font character across browsers. I got a reply about how identifying such a thing is impossible... This is the background "big goal" of my current question, which is an idea on how to measure this pixel width & height of a text character.

Can you place things inside of a "stretchy" container(div) and then obtain the width & height of this stretchy container which will stretch to hold the contents (some text, some graphics.. whatever..).

If this is possible (and you understood my explanation ), can you show me some CSS/HTML code to do this?

The idea is the parent element container will be bigger than it was before because of the addition of a child element inside of it that causes it to expand. This expansion should be snug exactly to the child element as well. Therefore, by measuring the dimensions of the newly stretched parent element, you can know the dimensions of its child element.

-thanks http://bstats.freehostia.com/b.gif

[jscheuer1]

If this is still about a textarea element, no. You can make a hidden division, populate it with characters, and measure it. But the data you get by doing so will not necessarily have any relation to the size of characters used in a given browser for a textarea element.

[glz]

No this isn't about textareas, don't be fooled by my other question. This one is different.


can you show me some CSS/HTML code to do this?

You can make a hidden division, populate it with characters, and measure it.
Guess you forgot to read that part. A 'hidden division' sounds like something I want to do, can you elaborate on that with code?


not necessarily have any relation to the size of characters used in a given browser
If this 'hidden division' parent container that stretches and fits snug around the child content, why won't it have a pretty accurate dimensions of its child content since it fits so snug around it? Prove it.

[jscheuer1]

I don't have to prove anything to you. You can do (span might be better than div for this):


window.onload=function(){
var d=document.createElement('div');
d.style.position='absolute';
d.id='test_size';
d.style.top='-2000px';
d.style.left='-2000px;
d.style.visibility='hidden';
d.appendChild(document.createTextNode('whatever text you want in there'));
document.body.appendChild(d);
alert(document.getElementById('test_size').offsetWidth);
};

But it won't tell you anything about a textarea.