Jesin - thanks for the code, but ideally I'm looking for something that will tell the sidebar widget container to tell the footer container to go directly below it. It seems like it should be a simple fix, but I'm still scratching my head as to how to do it. I like your code because it provides a workaround to add extra height to a page based on how much room you need in the sidebar - but...then it forces the footer way down every page and makes each page very tall.
That said, I found a workaround for myself...
Looking at the CSS with Firebug in FireFox I was able to find the line where the color of the sidebar widget area was defined. I discovered it was using code for RGBA color. Well - messing around with it I realized the last number in the color code informed what level transparency the color should be. I made that number 1 (which I believe means no transparency at all) and now it's a solid color making the text much easier to read when overlapping the footer section. I'm pleased with this even though it's not exactly what I wanted. The end result looks like this:
http://thescotchpine.com/support/
And here's the CSS code I used on my child theme:
/* Sidebar Widget */
.widget {
background-color: rgba(241, 241, 241, 1);
font-size: 14px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin: 0 0 24px;
padding: 20px;
word-wrap: break-word;
}
If anyone discovers how to inform the sidebar container to NOT overlap the footer, please let me know, but at this time I'm happy with the alternate fix I came up with.
Thanks,
-Josh