How to auto adjust the height according to c

Question

I have a <div> which needs to be auto adjusted according to the content in it. How can I do this? Right now my content is coming out of the <div>

The class I have used for the div is as follows

box-centerside  {
background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
float:left;
height:100px;
width:260px;
}

Answer 1

Don't set height. Use min-height and max-height instead.

Answer 2

I just used

overflow: hidden;

And it was worked for me properly. This div had some of float lefted divs.

Answer 3

I have made some reach to do auto adjust of height for my project and I think I found a solution

[CSS]
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;

This can be attached to prime div (e.g. warpper, but not to body or html cause the page will not scroll down) in your css file and inherited by other child classes and write into them overflow: inherit; attribute.

Notice: Odd thing is that my netbeans 7.2.1 IDE highlight overflow: inherit; as Unexpected value token inherit but all modern browser read this attribute fine.

This solution work very well into

• firefox 18+
• chorme 24+
• ie 9+
• opera 12+

I do not test it on previous versions of those browsers. If someone will check it, it will be nice.

Answer 4

Min- Height : (some Value) units  

---- Use only this incase of elements where you cannot use overflow, like tooltip

Else you can use overflow property or min-height according to your need.

Answer 5

Just write:

min-height: xxx;
overflow: hidden;

then div will automatically take the height of the content.

Answer 6

use min-height instead of height