Question

I have a set of divs like so:

<div id="textArea">
    <div id="text"></div>
</div>

CSS properties:

#textArea {
   height: auto !important;
   min-height: 2em;
   overflow: hidden;
}

#text{
display: none;
}

I’m filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.

I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.

Answer 1

I think you are simply doing too much – A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.

Hope that this points you the right way.