Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make div length elastic based on the length of text?

Status
Not open for further replies.

collegian

Programmer
Jul 1, 2010
64
US
Hello,

I have some content in div tags.I want to make the div elastic based on the length of the text so that the text doesn't spill out of the div tag.
I am attaching a file in which I want the width of the div "wrapper" to be dynamic based on length of the content in the content placeholder.

Thanks.
 
Are you sure it's the width you're talking about?

Widths on an element, unless specified, will always fill the entire space of their container (minus padding, border or margins). The only exception to the rule are widths on floated elements, where width only takes up as much space as the content within the element.

Heights on an element, unless specified, will always take up as much space as content within them. However, if elements within the element are absolutely positioned or floated, their occupied space does not count toward the parent occupied space.

That means that if you have a div called wrapper with no specified height and inside it only another div with absolute positioning and a height of 500px, your wrapper element will have 0 height (because it only contains content that is absolutely positioned, which does not count). Situation is very similar with floated, except that with floated elements, one can make their height count by clearing the floats (google that if you need to know more).

Looking at your code, it seems that you're already clearing your floats, so all you need to do is remove the specific height from the #wrapper and you'll be fine. And if it was really the width you were after, I would match the width of the #wrapper to that of the #content, or failing that, use float on the #wrapper to force automatic width (I would not recommend that though, because it makes little to no sense).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Thanks for the reply.I was able to figure it out.I was talking about the height.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top