Question

Take a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ item 6. It says:

It is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.

What workaround do I need to use in order to insert dynamic text into a div with absolute position?

Any approach is welcome

regards,

Answer 1

If your primary goal is to keep the div in it’s place, without changing it’s height or width based on the amount of text, I’d go with:

div {
    overflow: scroll;
}

The other option is to have the text size shrink to fit into the div, but that involves a certain amount of fuzzy math and you run the risk of the text being so tiny it’s pointless.

If you want the div to change it’s height based on the text, this also involves some fuzzy math, but basically, you would get the length of the text with:

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

And make the height change in relation to that length. You’d want to play with the numbers, but it would look something like:

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");