My question is, can I get the actual size of a div's content when div's width is 'auto' and the content is small enough to fit without resizing.
I know there is a way to find the div's actual size after it's loaded - divObj.offsetWidth/Height.
The problem is that this only works for content which is bigger than the div.
<div style="width:30px;">A text that will exceed 30px in width</div>
In this case, when the content is loaded the div will be resized and get a new offsetWidth/Height.
There will be lots of new lines after the resizement which posses another problem. After loading, the above example will look like this:
Now the example has offsetWidth little more than 30px (~50) and MUCH greater height.
This is not the desired effect. I want the width/height of the content when the div is not resized by the content.
Well, this works as intended and is really what I needed (thank you for which)
but there seems to be a problem -
div's width remains unchanged although content goes out.
Try it with a border...
<div id="myobj" style="border:red solid 1px;">Some Text</div>
var elem = document.getElementById("myobj");
elem.style.width='1'; // Garantee that the div will be resized (since anything will be > 1px)
Btw, I have another question which might offer a solution.
If we use <span> instead of <div> we have all we wanted above -
span automaticly takes the content's width and resizes correctly.
But I'll need it to maintain that initial width at all time. That sounds easy if it wasn't the following problem:
In Firefox this does not work:
<span style="width: 200px">Some text < 200px </span>
(which can be any but I'd like to make all usable (the script to work with all))
has an initial text.
That text is then "poured" letter by letter at a set intervals.
Since the element currently changes it's width with each interval, if the element is inline it really makes it bad for the eyes and impossible to read.
<div decoration="pour" flags="time:3">Some text</div>
A text with <span decoration="pour" flags="time:2"> only some words</span> being "poured"
In the example above, the second paragraph will be unreadable and confusing for 2 seconds (or other set time). If the element retains it's initial width, this won't be a problem
Anyway, why would in IE span sizing work and not in Firefox
However, min-width won't do because it is ,yet again, ignored when applied to a span...
About the last solution, works fine and really answers the topic.
But I can't use it because I can only use JS and JS won't handle obj.style.float='left'; (tested it). I can't dynamicly set the float:left ...