Text floats out of its div

I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.

You see how the dummy text is acting

URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm

开发者_如何学编程

I've accomplish this before but somehow it's not working now.

---

You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)

EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.

---

If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).

If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.

The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.

So in short:

• Add <div style="clear:both"></div> at the end of the #under-content <section>
• Change the 'top:82px' to 'margin-top:82px' on your .opentext div

I hope this helps!

---

Just use wordwrap: break-word; for the div and it will break the word to the next line.

---

You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.

However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.