In trying to make my sidebar dynamic, something happened that caused my entire sidebar to be pushed from the right side of the blog container to below all post content. I’ve not experience this problem before- I can typically do it without issue- so I’m not certain what to look for. Any ideas?
HTML/PHP
<?php get_header( 'blog');?>
<div id="blog-container">
<div id="blog">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-title">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div><!-- end post-title -->
<div class="post">
<?php the_content('read more..'); ?>
<div class="post-meta">
<p><?php the_date(); ?> | <?php the_tags('tags:', ', ', ''); ?> | <?php comments_number( '0', '1 comment', '% comments' ); ?></p>
<?php comments_template(); ?>
</div><!-- end post-meta -->
<?php endwhile; ?>
<?php else : ?>
Nothing found.
<?php endif;?>
</div><!-- end post -->
</div><!-- end blog -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div><!-- end blog-container -->
CSS
#sidebar {
float: right;
margin-top: 80px;
padding-right: 10px;
position: relative;
width: 300px;
}
.blog-social {
clear: both;
padding-bottom: 20px;
text-align: center;
}
.blog-social ul li {
display: inline;
padding-right: 10px;
}
.blog-social ul li:last-child {
padding-right: 0px;
}
#sidebar .social-heading {
text-align: center;
}
#sidebar #twitter-feed {
font-family: podkova;
font-size: 80%;
color: #333333;
letter-spacing: 1px;
line-height: 1.5;
padding-top: 20px;
padding-bottom: 20px;
width: 280px;
}
#sidebar #twitter-feed ul li {
padding-bottom: 10px;
}
#sidebar #instagram-feed {
padding-top: 20px;
padding-bottom: 20px;
}
It looks like an element is missing a closing tag, so your sidebar is being rendered inside the
#blog
div. Try moving</div><!-- end post -->
above<?php endwhile; ?>
.