How to dynamically increase the height of a

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

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

Answer 2

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 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>