Unable to align my sidebar to the contents section instead of comments

Question

Relevant link: http://themeforward.com/demo2/2011/01/17/testing-comments/

I've been toying with this for about 10 minutes, trying to get the sidebar to align properly and I can't figure it out.

I placed my comments in a new DIV to separate them from the posts. Usually I wouldn't do this but I want designers to have full CSS control without adding new classes when they start using this theme to build.

Anyway, my sidebar ends up being aligned with my comments rather than the content on my page.

Moving the div under the endif is not an option here because I want to be able to style just the post by itself if desired. Putting the comments below the sidebar makes the comments disappear!

My code looks like this:

<?php get_header(); ?>
<div id="container">
<div id="post_content">
<div class="clear">
<!-- Grab posts -->
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

<!-- Post title -->
<h1><?php the_title(); ?></h1>


<div class="sub-title-post">
<?php the_time('F j, Y'); ?> by <?php the_author_posts_link( ); ?>, under <?php the_category(', ') ?>
</div>

<!-- The post -->
<?php the_content(); ?>


<?php edit_post_link('Edit', '<p>', '</p>'); ?>

<!-- Tags -->
<h3 class="tags"><?php the_tags('Tags ',' / ','<br />'); ?></h3>
<h3 class="tags"><?php $turl = getTinyUrl(get_permalink($post->ID));
echo 'Short URL <a href="'.$turl.'">'.$turl.'</a>' ?></h3>

<!-- Next/Previous Posts -->
<div class="mp_archive2">
<div id="more_posts">
<div class="oe"><?php previous_post_link('%link', '-', TRUE); ?></div>
<div class="re"><?php next_post_link('%link', '+', TRUE); ?></div>
</div>
</div>




</div>
<?php endwhile; else: ?>
<p>No matching entries found.</p>
<?php endif; ?>
</div>

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


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

Answer 1

Put content and comments into a container div with float: left; and then add the same to your sidebar.

Answer 2

Your CSS is all messed up, first you want to float the sidebar and any other containers left, second stop using !important when your not even overwriting anything, next the major problem is you using clear:both: all over the place.

move <?php get_sidebar(); ?> above <?php comments_template(); ?> take out the unnecessary CSS and float:left.

Also consider using post_class http://codex.wordpress.org/Function_Reference/post_class

Answer 3

try styling the post content to float left, sidebar to float right, and clear left the comment.