How to auto adjust height of div?

I have a code just like this:

<div>
        <div style="float: left;">
              This is a dynamic content with 50 - 5000 words
        </div>
</div>

Code (markup):

I have a floating div inside another div. What I want is that the outside div will adjust the height automatically (just like table) when the content is long.

Please help

 

Well you dont have to do anything as it will auto expand but if you set height like 300px to main div than you may get trouble.

 

What you are looking for is called float wrapping. Many people (we call them idiots) use a complex class called "clearfix"... me?

overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats IE6/earlier */

That will make the outer div obey the height of children elements floating inside it. You could also use width:100% to trip haslayout assuming you are not setting any padding or borders.

 

Or even height: 1%; served to IE 6 and earlier (though if you code it right, there won't be a need to separate it from IE 7 and later).

 

As long as the element around it doesn't have a fixed height - then height:1% can cause problems.

 

True Jason, but since when do I ever have to deal with THAT?

 

Don't tell people to blindly use overflow: hidden. Wait til they start adding dimensions to those outer boxes and suddenly get all their overflowing content getting cut off. Like off-to-the-side CSS tooltips.

Overflow: hidden is my favourite float-encloser but it has a Day Job. Noobs don't know that.