What properties cause a DIV to automatically expand or shrink to hold all content inside the DIV? I would have thought that height: auto would have done the trick but this isn't working for me.
Expanding downward with the amount of content is the default behavior of DIV's.
If your CSS was this (no height attrtibute)
with this HTML
<div id="foo"> content </div>
Your content would be 400 pixels wide and centered
The height property is set to auto by default. Hence there is no need to touch the height property.
If the div contains inline elements (like IMG) or floating elements, there is a chance that not all of the content will show within the container. The best way to overcome this is to create the following style rules
and give the div a class of CLEARFIX as in
<div class="myDiv clearfix">
where myDiv is the class that you have allocated the div.
Div height is auto determined by the content inside it. Although floats sometimes cause margins to collapse. To prevent this, I use overflow:hidden on any parent div that contains floats. Borrowing from Ken's answer above:
overflow:hidden; /**float containment**/
content goes here
OK. SImply adding overflow:hidden; (as a property for the containing DV) works in browser view and live view.
Oddly in design view the DIV moved way off to the right (instead of centered), but I can live with it.