Help! My comment page is broken

Hi there

I have been designing my own WP themes for some time now, and for the first time I can not get this to work.

My HTML tag is suppose to be like this on every page:

<div id="container">
	<div id="content">
	</div>
	<div id="sidebar">
	</div>
	<div id="footer">
	</div>
</div>

However,

On one of my post without any comments made, my page is broken, and the view source is showing this, instead of the above source code:

<div id="container">
	<div id="content">
		<div id="sidebar">
		</div>
		<div id="footer">
		</div>
	</div>
</div>

I know the single.php looks similar to the index.php, but still can’t figure out the problem??

Here is my index.php:

<?php get_header(); ?>

	<div id="container">

        	<div id="content">

                <img src="http://localhost/illume/wp-content/themes/version2/images/image580x275.jpg" width="580" height="275" />

				<?php if (have_posts()) : ?>

                    <?php while (have_posts()) : the_post(); ?>

                        <div class="post" id="post-<?php the_ID(); ?>">
                            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="blue"><?php the_title(); ?></a></h2>
                            <p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>

                            <?php the_content('... Read more »'); ?>

                            <p>Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments'); ?><hr /></p>

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

                    <?php endwhile; ?>

                    <ul>
                            <?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>
                    </ul>

                <?php else : ?>

                    <h2>Not Found</h2>
                    <p>Sorry, but you are looking for something that isn't here.</p>

                <?php endif; ?>

		<!-- #content --></div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

and here is my single.php:

<?php get_header(); ?>

	<div id="container">

        	<div id="content">

                <img src="http://localhost/illume/wp-content/themes/version2/images/image580x275.jpg" width="580" height="275" />

				<?php if (have_posts()) : ?>

                    <?php while (have_posts()) : the_post(); ?>

                    <div class="post" id="post-<?php the_ID(); ?>">
                        <h2><?php the_title(); ?></h2>

                        <?php the_content('... Read more »'); ?>

                        <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
                        <?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>

                        <p>
                            This entry was posted
                            <?php /* This is commented, because it requires a little adjusting sometimes.
                                You'll need to download this plugin, and follow the instructions:
                                http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
                                /* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
                            on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
                            and is filed under <?php the_category(', ') ?>.
                            You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?> feed.

                            <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
                                // Both Comments and Pings are open ?>
                                You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.

                            <?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
                                // Only Pings are Open ?>
                                Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.

                            <?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
                                // Comments are open, Pings are not ?>
                                You can skip to the end and leave a response. Pinging is currently not allowed.

                            <?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
                                // Neither Comments, nor Pings are open ?>
                                Both comments and pings are currently closed.

                            <?php } edit_post_link('Edit this entry','','.'); ?>
                        </p>

            <?php comments_template(); ?>

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

                    <?php endwhile; ?>

                    <ul>
                            <?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>
                    </ul>

                <?php else : ?>

                    <h2>Not Found</h2>
                    <p>Sorry, but you are looking for something that isn't here.</p>

                <?php endif; ?>

		<!-- #content --></div>

	<?php get_sidebar(); ?>

	<?php get_footer(); ?>

Any suggestions?

Thanks in advance, I do apologize for the long post.

CHEERS 🙂