Question

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.

Answer 1

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!