I’m at a loss here. Whenever my main content is not as high as my sidebar, it appears like a sidebar is below it on the left.
See example: ForTheKids | Citizen Science Quarterly
Any thoughts to a cause would be welcome as I have not been able to find the bug.
Have you tried setting a min-height value for the content div? Hard to find the cause of the problem without any code.
It looks like you have an extra closing section element which is confusing the browser.
</div>
</section>
<!-- sidebar -->
[B] </section>[/B]
<!-- content wrapper -->
<article id="content-home" class="footer-slider row">
The op posted a link - just view source 
Pump the page through a validator - there are some other, similar issues, like an unclosed <div> and some typos like:
<i class"amp">
(no equals sign).
As well as what was mentioned above…
<div id=“wrapper”>
<section id=“container”>
aren’t closed… but what’s getting me totally lost is the comments. I was giving the code quick glance… I saw that you had </section><!–Content wrapper–>… which beg the question was that intended to be the close for <div id=“wrapper”> or is it that are you missing an opening tag?
The </section> was intended for the “container”.
Thanks yall, it ended up being an extra div sidebar, but can’t quite remove it without the page falling apart. However, I ended up being able to fix it by just removing the background.
Also @ PiontekMedia, if you’re using chrome, just use right click(or two fingers for macs) and use inspect element, it’s a wonderful debugging tool.
That’s a bit of a risky approach and one that is likely to come back and bite you later.
The page is still invalid and fixing the errors mentioned will indeed fix the page. You have badly nested elements and unclosed and stray tags that need fixing to be safe. IE hates missing tags and one tag can destroy a whole page when you least expect it.
Of course the choice is up to you;)