My sidebar is going over the footer. How can I sort this out?

Question

I have a content area and a sidebar. My content area is fine. When I add blog posts through WordPress the content area expands and doesn't go over the footer. My sidebar is fine but only when the content area is longer than the sidebar. When the content area is shorter, the sidebar goes over the footer.

I'm wondering why the sidebar isn't pushing the footer down like the content is. I've called the php get_sidebar(); inside the content div so I'm unsure what the problem is. I'm guessing it has something to do with the absolute positioning. I've tried positioning my sidebar to relative instead but then the content area gets pushed down and there is a huge margin, so that messes it up.

Here is the CSS for the elements of this section:

html, body {
height: 100%;
}

#wrapper {
min-height: 100%;
position: relative;
}

#container{
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}

#content{
width: 960px;
position: relative;
}

.entry-content{
width: 600px;
}

#sidebar{
width: 200px;
top: 0px;
right: 0px;
margin-right: 0px;
position: absolute;
text-align: right;
}

#footer{
width: 100%;
height: 300px;
bottom: 0px;
}

I'll be very grateful if someone manages to tell me how to get this working. I'm getting a bit frustrated over it. Thanks in advance!

Answer 1

Your have position: absolute; on your sidebar and absolutely positioned elements are taken out of the normal flow of the document (that is, other elements act as if the absolutely positioned ones are not there). That's why it isn't pushing the footer.

You might want to consider floating it instead. Use either float: left; on your content area or float: right;the sidebar, whichever is first in your HTML. And add overflow: hidden on their parent.