How to dynamically increase the height of a <div /> based on the contents?

Question

I have a div on a page that I need to put content into. Sometimes the content is a few lines high, and sometimes the content is more than the screen height with varying sizes in between.

There is content below the div so I need that content to be pushed down appropriately, so the content below is always right below the div.

Basically, it looks as follows:

<div id="MainContentArea"><!-- my content --></div>

<div id="BottomContentArea"><!-- pre-existing content --></div>

It's easy for me to specify a height for the #MainContentArea but I want the height to be adjusted dynamically. Can somebody please show me how to do this? Thanks.

Answer 1

Don't specify a height, and the div will automatically resize with the contents.

If you need a minimum size, there is a CSS property called min-height that sets the minimum height of the div.

Answer 2

Resizing vertically to fit the content is the expected behavior. If you have specified floats somewhere in your css you may need to clear them:

<div style="clear:both;"></div>