I have a div that wraps around many other divs on a dynamically generated HTML page (XHTML 1.0 Transitional). I've spent the entire evening trying to figure out why the div will only wrap around other divs if it has a height set. The div has the id of 'main': http://www.hospiceinform.net/ If you are using something like firebug, if you take off the min-height, you will notice that the div ceases to wrap around all of the divs (at least visually) and only wraps around 'mast_head' and 'seperator.' Why is this???? I need it to wrap around everything WITHOUT a height set so that the div will be expandable when content is added within the container. If someone could please explain what is happening, I am all ears ... I'm baffled and have tried everything in the book. Thanks!
You've floated both of the inner divs (block_AB and block_C). The div won't wrap around floated elements. Stick a new div at the bottom of #main and style it with clear: both; so it's forced beneath the other two divs. (Though usually clear: both would be applied to the footer div to avoid adding an extra element. You may be able to do this too actually if you're clever about how you use borders.) You can also fix this issue by removing the float from the sidebar div adding a margin-left to force it to the right of the main div, though this won't work in your case as your sidebar div is shorter than the main one.