How do I insert dynamic text into a div with an absolute position?
Take a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ item 6. It says:
This is not a viable solution for most projects because we usually don't know how much text will be in elements, or the exact font sizes that will be used.
What workaround do I need to use to insert dynamic text into a div with an absolute position?
Any approach is appreciated
Respectfully,
source to share
If your main goal is to keep the div in it without changing its height or width depending on the amount of text, then I would go with:
div {
overflow: scroll;
}
Another option is to reduce the size of the text to fit within the div, but this involves a certain amount of fuzzy math and you run the risk that the text is so small that it is meaningless.
If you want the div to change the height based on the text, this also involves some fuzzy math, but basically you will get the length of the text with:
var sometext = "Hey, I'm some text!";
var textlength = sometext.length();
And make a change in height relative to that length. You want to play with numbers, but it will look something like this:
var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");
source to share
It is possible to use "overflow: auto" for the dynamic-text-container div file. So the height is not a problem.
source to share
The problem is that dynamic text doesn't fit in an absolutely positioned div - the div will expand to fit any text. In your example, there are no heights defined on the red and green div.
Absolutely positioned divs are pulled out of the document flow, so whatever comes after them in the html will act as if they don't even exist.
Projects that use absolutely positioned divs must have a height defined on the containing div, so absolutely positioned divs do not overlap other content. Your example <div id="div-1">
defines a height of 250px. Change that to 100px and you will see what <div id="div-after">
moves under the red and green divs.
So, if you have an absolutely positioned div in the sidebar, then you can add all the dynamic text you need. If you have one in your title, it will make your project very difficult to implement.
source to share