When divs don't resize with content?

Question

I'm working on some complex design and have a silly question once again :)

Well, let's say I have a div and some content inside, like:

<div style="background-color: #fff; width: 1000px; margin: 0 auto;">
     <img src="img.png" />
     <p>Blablabla :)</p>
</div>
<div style="background-color: #000; width: 1000px; margin: 0 auto;"></div>

Div's width is fixed, but I don't tell the browser what's the height (so there's no height property of div in css file).

And then, when I add more and more text the first paragraph or bigger image, the text-child of first div is in the second div.

How to prevent this from happening? Or what did I to make it happen?

Thanks!

Answer 1

It should be auto-expanding, it sounds like you have some other styling with positioning that's throwing the default behavior off.

You can see in a demo here that it should expand (height: auto;) to whatever content you give it, dynamically added or not.

Answer 2

Make sure that the parent divs are not position:absolute; or position:fixed; in the CSS. They should be position:relative;.

If any child items are float:left; or float:right; then the reective parent div needs an overflow:auto; property inorder to cause the div to fully wrap the child items.

It'd help us help you more if you posted a whole sample of a working page, not just the divs, and the CSS as well.

Answer 3

I would check for floats and positioning on the img and p. But I cant tell you more without seeing the full css/html can you post a link?