How to dynamically increase the height of a 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 size

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

The height should resize automatically, and the bottom DIV should be pushed down in accordance with this height.

Answer 3

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>

Answer 4

#MainContentArea will always expand dynamically since its height is assigned as auto.

Since both have the same width, #BottomContentArea will be pushed down.

Instead of percentage, use exact widths.

<div id="MainContentArea" style="float:left;height:auto;width:100%;">
<!-- my content -->
</div>

<div id="BottomContentArea" style="float:left;height:auto;width:100%;s">
<!-- pre-existing content -->
</div>