WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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(', ') ?>

<!-- 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>

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

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

<?php get_footer(); ?>
share|improve this question
close voted as plain css & html question. – kaiser Jul 15 '11 at 22:57
up vote 1 down vote accepted

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

share|improve this answer

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

share|improve this answer

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

share|improve this answer
Didn't work, thanks though. – AndrettiMilas Jul 15 '11 at 21:36

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.