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


Tags: css,wordpress,positioning,footer,sidebar

Problem :

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!



Solution :

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.


    CSS Howto..

    Any idea how to add this sinking hover effect to an image/link?

    How to make font-size less for 2px than parent element?

    Displaying a title and description on a jquery slideshow

    Using yepnope, how can I know if a css resource was loaded successfully?

    How to show divs inline. css html

    HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome

    How to change the background color on a input checkbox with css? [duplicate]

    How do I float a
  • to the right in CSS?
  • How to add hover effect to menu using jQuery

    How to fix my nav bar? Positioning is different on different screens

    Javascript Slider not showing and Graph tips

    How to remove width with center DIV

    R: Shiny: How to align a gvisTable to the center in shinyapp

    How to get Jsfiddles working on a website? [duplicate]

    How to make CSS div width equal to browser width if element is inside wrapper element

    How to find all inputs which is not inside one div with css selector?

    How to Position an Element Absolute from Center - CSS

    When I say position:fixed, how do I tell mobile browsers I mean it?

    Coming from Android XML layouts, how to place web page elements in XHTML?

    How can I make a button-link, as Like in Facebook?

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to make whole table cell clickable but vertical align text inside it - CSS

    Ionic2 : How to set up css in single page

    How can I differentiate unordered lists in CSS?

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How do I add a margin between bootstrap columns without wrapping

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How to get Style From jQuery in angular2

    How to undo CSS change after clicking on another link

    How to zoom in to a specific point smoothly with CSS?