Page.php vs Single.php

Question

I have a page.php and single.php template that are 100% identical. Yet, when I render page.php the div don't get nested in the same way as single.php and the layout gets broken.

I've even diff'd the output of the two pages and, with the exception of the meta and non visible elements, they are also 100% identical.

Following is the code of both templates:

<?php get_header(); ?>

<?php 
  if ( have_posts() ) while ( have_posts() ) : the_post(); 
  $post_id = $post->ID;
?>

<div class='container span12' id='single-post'>

    <div class='span8 alignleft'>
      <div class='post single'>

        <h2 class='entry-title'><?php the_title(); ?></h2>

        <?php the_content(); ?>

        <?php comments_template( '', true ); ?>
        <?php endwhile; ?>
      </div> 
    </div>

    <div class='span4 alignright'>
      <div id='sidebar'>
        <?php get_sidebar(); ?>
      </div>
    </div>

</div><!--end container-->

<?php get_footer(); ?>

What should I check to fix this issue?

Answer 1

Edit

Based on this comment:

commenting out comments_template works.

The problem lies in the template markup in comments.php. The likely reason that you see it in some output and not others is likely because you've got comments enabled in one context, and not in the other. Try comparing single posts with comments enabled vs disabled, and you'll likely see the same thing happen.

Original

You've closed your loop in the wrong place. Your <?php endwhile; ?> is in the middle of your post-container markup. Also, you don't ever close your if clause.

I would modify your markup to be a bit more intuitive, and also close the loop properly:

<div class='container span12' id='single-post'>

    <div class='span8 alignleft'>

        <?php 
           if ( have_posts() ) while ( have_posts() ) : the_post(); 
           $post_id = $post->ID;
        ?>

        <div class='post single'>

            <h2 class='entry-title'><?php the_title(); ?></h2>

            <?php the_content(); ?>

            <?php comments_template( '', true ); ?>

        </div><!-- .post single -->

        <?php endwhile; endif; ?>

    </div><!-- .span8 alignleft -->

    <div class='span4 alignright'>
      <div id='sidebar'>
        <?php get_sidebar(); ?>
      </div>
    </div>

</div><!--end container-->

That should resolve any <div> nesting problems related to the Loop. If not, you'll need to provide a live link to the rendered output, so we can see what's happening.

Answer 2

What should I check to fix this issue?

Your header.php. Your Widgets. Your sidebar code. Even your CSS could lead to the appearance that the <div>s don't nest.

Identical code does not produce different results in different places. Computers are reliable like that. You have broken markup. You need to find it. It could be just about anywhere in the page before the <div>s go bad, as reflected in the source of the page not necessarily in the rnedered, visual layout.

Use the W3C Validator. It will help. You can submit local files using the FireFox extension "Web Developer", or upload them manually.