This is a weird one, though I'm hoping like hell there's something obvious I've overlooked. On the blog page of a customized version of WP-ESP, the right sidebar stays right but drops down to the level of the last blog entry on the page.
It doesn't seems to be a missing </div>, as the page validates (other than a bizarre "character data is not allowed here:div id='footer'" bug on every page of the theme). Looking at the HTML source, the sidebar div is not embedded in the blog entry div. Checking outlines on all the block-level elements, there's no overlap. Tinkering with main column and/or sidebar width does nothing. It's also not an IE problem, as I'm using Firefox.
I searched the forum for hours with no luck. Does anyone have any clue what might be going on here? Thanks in advance!
Relevant HTML:
<div id="content">
<div class="blog-entry">
<div class="contenttitle">
<h2>...</h2>
<div class="contentdate">
<p>May 21, 2009</p>
</div>
</div>
<p>...</p>
<div style="clear:both;">
</div>
<p><a href="...">...</a></p>
<div class="postspace">
</div>
</div>
<div class="blog-entry">
<div class="contenttitle">
<h2>...</h2>
<div class="contentdate">
<p>May 20, 2009</p>
</div>
</div>
<p>...</p>
<div style="clear:both;">
</div>
<p><a href="...">...</a></p>
<div class="postspace">
</div>
</div>
<div class="blog-entry">
<div class="contenttitle">
<h2>...</h2>
<div class="contentdate">
<p>May 19, 2009</p>
</div>
</div>
<p>...</p>
<div style="clear:both;">
</div>
<p><a href="...">...</a></p>
<div class="postspace">
</div>
</div>
<div id="sidebar">
<ul class="sidebar">
<li id="linkcat-2" class="widget widget_links"><h2 class="widgettitle">Blogroll</h2>
<ul class='xoxo blogroll'>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div><!-- #sidebar -->
</div><!-- #content -->
-------
Relevant CSS:
div#header, div#navigation div#menu, div#submenu ul, div.featured, div#works, div#content, div#foot{margin: 0 auto; overflow: hidden; width: 946px;}
div#content{padding: 56px 0;}
div#content div.blog-entry{display: inline; float: left; width: 626px; margin-bottom: 20px;}
div#content div.blog-entry ul, div#content div.blog-entry ol {margin-left:66px; padding-left:14px;}
div#content div.blog-entry ul ul, div#content div.blog-entry ol ol {margin-left:26px;}
div#content div#sidebar{display: inline; float: right; margin-top: 1em; text-align: left; width: 264px;}
div#content div#sidebar ul {margin-top: -8px;} /* After dl */
div#content div#sidebar ul li {display: inline;}
div#content div#sidebar ul li a{border-bottom: 1px solid #333; display: block; padding: 9px 0 8px;}