adjusting height of div based on internal div

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.

Answer 2

Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?