Visit Live Site
I recently encountered an issue where my sidebar, which is typically dynamic, suddenly shifted below all post content instead of staying on the right side of the blog container. This problem has not occurred before, and I'm unsure what may have caused it. Any suggestions or ideas on how to troubleshoot this?
Looking for solutions in HTML/PHP coding.
<?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 -->
Also seeking help with CSS styling.
#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;
}