Forums

[resolved] sidebar too low -- aligning to bottom blog post (5 posts)

  1. sboykew
    Member
    Posted 3 years ago #

    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;}
  2. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    A link to your site would be more helpful.

  3. blogbreaking
    Member
    Posted 3 years ago #

    If there are no block-level errors, a simple thing that may be wrong is the padding for the sidebar or content div might be too large and pushing the sidebar down. If you have the web developers plugin for firefox, theres and outline feature that could help identify if this is the problem.

  4. sboykew
    Member
    Posted 3 years ago #

    Right, sorry: link here.

  5. sboykew
    Member
    Posted 3 years ago #

    Thanks for the suggestion, blogbreaking. I have that plugin and checked the outlines early on and couldn't find any overlap. Someone at The Web Squeeze suggested I wrap the blog entries in a wrapper with a set width of 626px and float it left, which worked. What a relief!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags