Overlapping sidebar and footer elements

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 {
clear:both;
}

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:

https://alistapart.com/articles/negativemargins/

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