Question

I have been editing a WordPress website for the first time and now I have had a problem where the main content div overflows the footer and i’m not sure how to deal with this.
Here is the website:

http://www.twazzle.co.uk/twazzle/wordpress/

Any help would be appreciated.

Answer 1

You’ve got a few problems here. One, you have floated elements inside blocks with no float or clears. Two (and this is your main problem) your #content div is position:absolute but nothing else is. With absolute positioning your divs will ignore others resulting in overlapping and other messiness. To fix, before making an element position:absolute make it’s containing block element position:relative. You’ll also want to fix that float problem.

#main { 
    overflow: hidden; //this tells it to contain floated elements inside it
    }
#primary {
    float: left;
    margin: 10px;
    position: relative; //this will contain nested absolutely positioned elements
    width: 999px;
    }