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(); ?>
  • close voted as plain css & html question. – kaiser Jul 15 '11 at 22:57

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

|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

|improve this answer|||||

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

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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