WordPress CSS - Sidebar Absolute Positioning

Individual posts and categories without enough entries are not displaying properly. See the sidebar at the end of the page in the links below.

I've been told it may be "absolute positioning of the sidebar wrap causing it to position over the container." Any help is appreciated.

Individual post:
http://obsessionfitness.com/bowflex...djustable-space-saving-home-gym-free-weights/

Category page:
http://obsessionfitness.com/category/equipment-type/weight-resistance-machines/

Example of category page with enough posts so there's no problem:
http://obsessionfitness.com/category/exercise-equipment/beachbody-exercise-equipment/

 

You should not need to use absolute positioning..

Create a <div> around the main content and the sidebar, then use that div for the background.

 

Do you mean in the index.php file? I'm not exactly sure how to do this. Here's the index.php code. Thanks for your help?

<?php get_header(); ?>

<div id="content">

<div id="blog">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="blogpost" id="post-<?php the_ID(); ?>">

<div class="postheader">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<span class="postmeta">
<?php comments_popup_link('No Comments', '1 Comment', '% Comments','commentslink'); ?> | Category: <?php the_category(', ') ?>

<br />&nbsp;Published on: <?php the_time('F j, Y') ?>

</span>
</div>
<div class="postbody">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<div class="subpostmeta"><?php comments_popup_link('No Comments', '1 Comment', '% Comments','commentslink'); ?> | Category: <?php the_category(', ') ?> <?php edit_post_link('Edit', '| ', ' '); ?></div>
</div>

<?php endwhile; ?>
<?php get_sidebar(); ?>

<div class="navigation">
<div class="alignleft"><h3><?php next_posts_link('&laquo; Next Page of Reviews') ?></h3></div>
<div class="alignright"><h3><?php previous_posts_link('Previous Page &raquo;') ?></h3></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

</div>

</div>
<?php get_footer(); ?>

 

You're wrapping div#sidebarholder into div#blog, I'd rather take div#sidebarholder out of it, wrap div#sidebarholder and div#blog into a div#container.

 

Where is this happening? I see the following code at the start of the sidebar.php file but not sure how it's wrapping.

<div id="sidebarholder">
<div id="sidebar">

I still think this may be a CSS issue. I hope someone can help...I really need to get this fixed. Thanks.

 

I took out the absolute positioning in Layout.CSS. It fixed the problem but removed the sidebar completely on other pages. Anyone have suggestions? Thanks.

 

Hi,

You need to set a min-height for all your content, so regardless of the page size it has a minimum height (the height of the sidebar)

In fact it's already sort of implemented, but just with an incorrect height, open layout.css and find:

#blog {
float: left;
[B]min-height:1050px;[/B]
}

Code (markup):

Change the min-height so it's enough to hold the content of the sidebar, doing some quick tests about 2400px seems ok, so:

#blog {
float: left;
[B]min-height:2400px;[/B]
}

Code (markup):

 

Finally, someone who was able to help! That worked, thanks so much. Reputation bumped.

 

glad you got it sorted. absolute positioning in css is dodgy in browsers, doesnt display correctly in most.

 

Still breaks on large fonts/120dpi systems - which is why you shouldn't be using absolute positioning to make your sidebar in the first damned place. That's float's job. You leave it as is, next time you go in and change the content of the sidebar it will just screw up again.