Support » Themes and Templates » Overlapping sidebar and footer elements

  • On my blog, I’ve been using the Rubric theme, which I have modified pretty extensively over the past couple days. Originally, it did not come with separate header.php, footer.php, or sidebar.php files. I created those, pasted in the relevant code that had previously been stacked up in the index.php file, and then I made changes as necessary to make things look right.

    The one thing I can’t figure out is why my sidebar and footer overlap on individual post pages. Here is an example (scroll down below post):

    Theme Revisions

    Rather, the Spam Karma banner in the footer overlaps. I could turn this off in Spam Karma 2, but does anyone have any other suggestions? Maybe pages would look better if the footer always displayed below the bottom of the sidebar. How do I make the footer do this?

Viewing 9 replies - 1 through 9 (of 9 total)
  • My guess is the div id=sk2-footer — you’ve got #footer set to clear: both, but sk2-footer is outside of the footer div, and there’s not enough content on a single post page to push it below the bottom of the sidebar.

    Try adding

    #sk2-footer { clear:both; }

    to your CSS, and see if that helps. (I could very well be quite wrong, but it’s worth a shot.)

    It didn’t work. Here’s the section of the CSS relevant to the footer, including the bit you just recommended. I’m just an amateur at this; I’ve been learning about PHP and CSS the hard way, through experimenting with themes developed by others.

    /* Footer
    ——————————————– */
    #footer {
    background-color: inherit;

    #footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    float: none;
    width: 760px;
    clear: both;

    #footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;

    #sk2-footer {

    Urg. I just spent some time playing with this theme, and I can’t make it work either.

    A quick (but not perfect) solution is to create a single.php template (just duplicate the index.php and rename it as single.php), and then remove the footer / sk-footer sections from that. It means you won’t have a footer on a single post page, but it keeps it from looking wonky when you don’t have enough content to stretch down to the bottom. (I had the same problem with a theme I was working on once, and I don’t think I ever got it to work right.)

    Maybe someone else who’s more proficient with CSS can help? Sorry.

    That’s OK. I’ll probably take your advice, and as you say maybe someone else knows a better solution.

    It looks like #menu is positioned, not floated, so you can’t really clear the footer below it.

    (Actually it says {float: right} too but I think that would be ignored.)

    Sorry it has taken me a couple days to get back to this. What should the position of #menu be? I tried “normal” and “relative” and it made no difference, or actually it made things worse. Should #footer be positioned in some way? I experimented there, too, and the results weren’t pretty.

    If you definitely want #footer below both columns, you need to float both #menu and #content. But then it gets a little tricky.

    The way you have it now, with

    #content {width:auto}
    #menu {width: 20em;}

    — I can’t yet figure out how to do that when both are floated. You might find a clue from those “Holy Grail” CSS layouts, maybe.

    You could wrap #content and #menu inside a #container, give margins to #container, then float #content and #menu left and right with percentage widths.

    Actually this may be a better solution:

    Thanks, I’ll try the ideas you suggested. Hopefully, one of these will work. I do want the footer beneath both columns.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Overlapping sidebar and footer elements’ is closed to new replies.