Question

Actually I don’t know how to find solution to this problem and how to name it.
Here’s the link to my site:

http://www.portalpraktyk.pl/podstrona_itp

The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there’s also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).

I won’t show you a code, because I don’t know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.

Does anybody know solution to this problem?

Answer 1

Your problem is a classic problem of floats not clearing.

Look for information on .clearfix.

Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.

Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.