CSS how to for dynamic text

HTML & CSS
1

Hi all,

I would like to know how to code a div so it dynamically resizes to the amount of text that is added in to it’s area.

This is how i would normally create a text area but i want the height:500px; to increase or decrease dependent on the text that is added in via a CMS system.

.text{
position:absolute;
width:500px;
height:500px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#c2b2af;
background-color:#fff;
}

Thank you

2

Well, you could try it and see if it works. The only problem I can think of might be the page content “jumping” a bit as it reshuffles the elements around to accomodate the new dimensions.

I guess it depends on how “fixed” your layout is and how picky you are.

3

Yup, that is far and away the easiest way to create any HTML. if you don’t specify a height, it will take whatever height its contents need.

4

The problem with position:absolute is that it takes the element out of the flow of the document (meaning that other elements don’t know it’s there). Thus, if you have any element placed underneath this div, the abs pos div will expand with more content, but will overlap/underlap the content below it. It’s better to float the div rather than position it absolutely.

5

Ok great, sounds simple in theory :slight_smile: i’ll give it a shot!

Thank you guys.

6

Why not

.text{
position:absolute;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#c2b2af;
background-color:#fff;
}

??

7

You mean you don’t need to declare a height? The div will just automatically increase with the amount of text?