{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 smile是对你的礼貌 的问题《Why is the styling of these nearly identical pages》','https://www.manongdao.com/q-741403.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am creating my first custom WordPress theme and can't figure out why two nearly identical category template files are being displaying differently.
The black-colored band at the bottom of this page should extend across the entire width of the page, like it does on this page, but for some reason it's not.
The code for the correctly-styled template file is as follows:
<?php get_header(); ?>
<body class="projects">
<div id="page-container">
<?php get_sidebar(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<div class="post-container">
<div class="post-title">
<span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h3>
</div>
<div class="post-content">
<?php the_content(''); ?>
</div>
<div class="post-footer">
<p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
</div>
</div>
<?php endwhile; ?>
<div id="more-posts">
<a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
</div>
</div>
<?php endif; ?>
</div>
</div>
The code for the incorrectly-styled template is as follows:
<?php get_header(); ?>
<body class="adventures">
<div id="page-container">
<?php get_sidebar(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?>>
<div class="post-container">
<div class="post-title">
<span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div>
<div class="post-content">
<?php the_content(''); ?>
</div>
<div class="post-footer">
<p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
</div>
</div>
<?php endwhile; ?>
<div id="more-posts">
<a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
</div>
</div>
<?php endif; ?>
</div>
</div>
Both category template files are structured the same (as far as I can tell) and use the same style sheet, so I am at a loss as to why they are being displayed differently by the browser.
Thanks.
Adding this in place of my original answer, since you changed the question. Turns out you are missing a closing
</div>. The problem doesn't manifest itself on the first page because you only have one post, but I bet if you added another, you'd see the same thing. The snippet below focuses just on your while loop, and should fix your problem if you add the closing</div>where I've indicated via a comment.You can use a validator to check for issues, use the w3schools validator tool found here http://validator.w3.org/
enter your URL and it will show you what errors it finds.
You can select a box under where you enter your URL to show source code. This will allow you to quickly view your troubled area.
I hope this helps, Good Luck!
The problem is that your footer in the http://bugsandbubs.com/category/adventures/ is inside your
#page-containerso it's only growing 945px like it's parent.If you move your
<footer>element outside the<div id="page-container">you should be good to go.The pages are ALMOST identical... but on the page with the incorrect styling you have some mistakes...
All you got wrong is the images URLs;
Because the images have a different actual size that the one you are setting up on the css... when the url is broken/wrong this messes up the page styling...
I would suggest to fix the links and also add on your style.css file on line 151: