Sidebar sometimes pushed down, sometimes not ... why?

WebMachine · March 16, 2014, 10:04pm

I have a ‘practice’ WordPress site at http://jaybeeweb.com/TestSite/, where a strange thing is happening with the sidebar in the blog part of the site which, I’m pretty sure, is caused by my css styles.

When you view a complete post (by, for example, clicking on “Read more …”), the sidebar seems to be fine if there are no comments posted for that particular post, but it gets pushed down and the page breaks if there are comments posted.

I can’t figure out why the comments are interfering with the sidebar, because they don’t seem to be overlapping in any way. I think I need a fresh pair of eyes to look at this and maybe find the issue that I can’t see. Any help here would be greatly appreciated. Thanks.

ronpat · March 17, 2014, 12:28am

There seems to be a stray </div> on the page:


        </div> <!-- .post -->
    [color=red][s]</div>[/s][/color]

Then move #blogbar above #main. Floats need to preceed the text or containers that are supposed to sit beside them.

(Copy to a file and open in your browser.)


<!DOCTYPE html>
<!--[if IE 8]>
<html id="ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>The Quick Brown Fox | JayBee Test Site</title>
    <meta name="description" content="We are a church committed to loving God and each other. A people oriented ministry where you will 'grow in grace and in the knowledge of our Lord and Saviour Jesus Christ'.">
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://jaybeeweb.com/TestSite/wp-content/themes/WP-TestSite/style.css" media="screen">
    <link rel="pingback" href="http://jaybeeweb.com/TestSite/xmlrpc.php" />
    <!--[if lt IE 9]>
    <script src="http://jaybeeweb.com/TestSite/wp-content/themes/WP-TestSite/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <link rel="alternate" type="application/rss+xml" title="JayBee Test Site &raquo; The Quick Brown Fox Comments Feed" href="http://jaybeeweb.com/TestSite/?feed=rss2&p=97" />
    <script type='text/javascript' src='http://jaybeeweb.com/TestSite/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
    <script type='text/javascript' src='http://jaybeeweb.com/TestSite/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jaybeeweb.com/TestSite/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jaybeeweb.com/TestSite/wp-includes/wlwmanifest.xml" />
    <link rel='prev' title='Cicero' href='http://jaybeeweb.com/TestSite/?p=105' />
    <link rel='next' title='Werther' href='http://jaybeeweb.com/TestSite/?p=102' />
    <meta name="generator" content="WordPress 3.8.1" />
    <link rel='canonical' href='http://jaybeeweb.com/TestSite/?p=97' />
    <link rel='shortlink' href='http://jaybeeweb.com/TestSite/?p=97' />
    <style type="text/css">
.recentcomments a {
    display:inline !important;
    padding:0 !important;
    margin:0 !important;
}
    </style>
</head>
<body class="single single-post postid-97 single-format-standard">

<div id="wrapper">
    <header id="masthead" class="site-header" role="banner">
        <div id="site_info">
            <h1 class="site-title">
                <a href="http://jaybeeweb.com/TestSite/" title="JayBee Test Site" rel="home">
                    <span id="sitename_1">JayBee</span><br /><span id="sitename_2">WordPress Test Site</span>
                </a>
            </h1>
            <h2 class="site-description">Not just another WordPress site</h2>
        </div> <!-- end of site_info div -->
        <nav role="navigation" class="site-navigation main-navigation">
            <h1 class="assistive-text">Menu</h1>
            <div class="assistive-text skip-link">
                <a href="#content" title="Skip to content">Skip to content</a>
            </div>
            <div class="menu-primary-navigation-container">
                <ul id="menu-primary-navigation" class="menu">
                    <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://jaybeeweb.com/TestSite/">Home</a></li>
                    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://jaybeeweb.com/TestSite/?page_id=6">Who We Are</a></li>
                    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://jaybeeweb.com/TestSite/?page_id=16">Our Services</a></li>
                    <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://jaybeeweb.com/TestSite/?page_id=29">Donations</a></li>
                    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://jaybeeweb.com/TestSite/?page_id=27">Resources</a></li>
                    <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://jaybeeweb.com/TestSite/?page_id=31">Contact</a></li>
                    <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://jaybeeweb.com/TestSite/?page_id=56">Blog</a></li>
                </ul>
            </div>
        </nav> <!-- .site-navigation .main-navigation -->
    </header> <!-- #masthead .site-header -->
    <div id="content" class="content-area">
        <div id="blogbar">
            <div id="sidebar">
                <!--<h6>sidebar_blog.php</h6>-->
                <h4>Categories</h4>
                <ul>
                    <li class="cat-item cat-item-6">
                        <a href="http://jaybeeweb.com/TestSite/?cat=6" title="View all posts filed under First Blog Category">First Blog Category</a>
                    </li>
                    <li class="cat-item cat-item-9">
                        <a href="http://jaybeeweb.com/TestSite/?cat=9" title="View all posts filed under Fourth Blog Category">Fourth Blog Category</a>
                    </li>
                    <li class="cat-item cat-item-7">
                        <a href="http://jaybeeweb.com/TestSite/?cat=7" title="View all posts filed under Second Blog Category">Second Blog Category</a>
                    </li>
                    <li class="cat-item cat-item-8">
                        <a href="http://jaybeeweb.com/TestSite/?cat=8" title="View all posts filed under Third Blog Category">Third Blog Category</a>
                    </li>
                </ul>
                <h4>Archives</h4>
                <ul>
                    <li><a href='http://jaybeeweb.com/TestSite/?m=201403'>March 2014</a></li>
                    <li><a href='http://jaybeeweb.com/TestSite/?m=201402'>February 2014</a></li>
                    <li><a href='http://jaybeeweb.com/TestSite/?m=201401'>January 2014</a></li>
                </ul>
            </div>
        </div>
        <div id="main" class="site-content">
            <div class="page_nav_top">
                <div class="alignleft"><a href="http://jaybeeweb.com/TestSite/?p=105" rel="prev">&larr; Cicero</a></div>
                <div class="alignright"><a href="http://jaybeeweb.com/TestSite/?p=102" rel="next">Werther &rarr;</a></div>
                <div class="clear"></div>
            </div> <!-- .page_nav_top -->
            <div id="post-97" class="post-97 post type-post status-publish format-standard hentry category-blog category-first-blog-category category-fourth-blog-category">
                <h2><a href="http://jaybeeweb.com/TestSite/?p=97">The Quick Brown Fox</a></h2>
                <p class="post_date post_info">Feb 16, 2014</p>
                <p class="post_info post_author">Posted by webmachine</p>
                <div class="post_content">
                    <div id="idTextPanel">
                        <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! <span id="more-97"></span>Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
                        <p>Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! &#8220;Now fax quiz Jack! &#8221; my brave ghost pled.</p>
                        <p>Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard&#8217;s job is to vex chumps quickly in fog. Watch &#8220;Jeopardy! &#8220;, Alex Trebek&#8217;s fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just</p>
                    </div>
                </div>
                <p class="post_info post_cat">filed under <a href="http://jaybeeweb.com/TestSite/?cat=5" title="View all posts in Blog" rel="category">Blog</a>, <a href="http://jaybeeweb.com/TestSite/?cat=6" title="View all posts in First Blog Category" rel="category">First Blog Category</a>, <a href="http://jaybeeweb.com/TestSite/?cat=9" title="View all posts in Fourth Blog Category" rel="category">Fourth Blog Category</a></p>
                <p><a href="http://jaybeeweb.com/TestSite/?p=97#comments" class="comments-link"  title="Comment on The Quick Brown Fox">4 comments</a></p>
                <div class="page_nav_bottom">
                    <div class="alignleft"><a href="http://jaybeeweb.com/TestSite/?p=105" rel="prev">&larr; Cicero</a></div>
                    <div class="alignright"><a href="http://jaybeeweb.com/TestSite/?p=102" rel="next">Werther &rarr;</a></div>
                </div> <!-- .page_nav_bottom -->
                <hr class="comments_start">
                <div class="testsite_comments">
                    <h3 id="comments-title">4 Responses to  "The Quick Brown Fox"</h3>
                    <ol>
                        <li class="comment byuser comment-author-webmachine bypostauthor even thread-even depth-1" id="comment-7">
                            <div id="div-comment-7" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-7">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! &#8220;Now fax quiz Jack! &#8221; my brave ghost pled.</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&replytocom=7#respond' onclick='return addComment.moveForm("div-comment-7", "7", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                        <li class="comment byuser comment-author-webmachine bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-8">
                            <div id="div-comment-8" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-8">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz.</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&replytocom=8#respond' onclick='return addComment.moveForm("div-comment-8", "8", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                        <li class="comment byuser comment-author-webmachine bypostauthor even thread-even depth-1" id="comment-9">
                            <div id="div-comment-9" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-9">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>A wizard&#8217;s job is to vex chumps quickly in fog. Watch &#8220;Jeopardy! &#8220;, Alex Trebek&#8217;s fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&replytocom=9#respond' onclick='return addComment.moveForm("div-comment-9", "9", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                        <li class="comment byuser comment-author-webmachine bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-10">
                            <div id="div-comment-10" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-10">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox.</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&replytocom=10#respond' onclick='return addComment.moveForm("div-comment-10", "10", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                    </ol>
                </div> <!-- .testsite_comments -->
                <div id="respond" class="comment-respond">
                    <h3 id="reply-title" class="comment-reply-title">Write a Reply or Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/TestSite/?p=97#respond" style="display:none;">Cancel reply</a></small></h3>
                    <form action="http://jaybeeweb.com/TestSite/wp-comments-post.php" method="post" id="commentform" class="comment-form">
                        <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p>
                        <p class="comment-form-author">
                            <label for="author">Name <span class="required">*</span></label>
                            <input id="author" name="author" type="text" value="" size="30" aria-required='true' />
                        </p>
                        <p class="comment-form-email">
                            <label for="email">Email <span class="required">*</span></label>
                            <input id="email" name="email" type="text" value="" size="30" aria-required='true' />
                        </p>
                        <p class="comment-form-url">
                            <label for="url">Website</label>
                            <input id="url" name="url" type="text" value="" size="30" />
                        </p>
                        <p class="comment-form-comment">
                            <label for="comment">Comment:</label><br />
                            <textarea id="comment" name="comment" aria-required="true"></textarea>
                        </p>
                        <p class="form-submit">
                            <input name="submit" type="submit" id="submit" value="Post Comment" />
                            <input type='hidden' name='comment_post_ID' value='97' id='comment_post_ID' />
                            <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                        </p>
                    </form>
                </div> <!-- #respond -->
            </div> <!-- .post -->
        </div> <!-- #main .site-content -->
        <div class="clear"></div>
    </div> <!-- #content .content-area -->
    <footer role="contentinfo">
        <div id="footer_content">
            <div class="post-74 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part D</h3>
                <p>Per ex malis evertitur sadipscing. Sint eripuit scripserit nec no. Pri ubique utroque alienum ex, qui congue putent labore ne, eu qui tincidunt signiferumque mediocritatem. Et* quaeque impedit noluisse sea, volumus fabellas adipiscing pri* an,</p>
            </div>
            <div class="post-72 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part C</h3>
                <p>At veri graeci disputationi vix. Ut amet electram constituam per. Vix eirmod electram et, ad mei quas vivendo euripidis. Nec no sale falli, id ius sint graecis, suas partiendo mea ut. Ex clita interesset quo. Qui integre dignissim at, id elitr tantas sea.</p>
            </div>
            <div class="post-70 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part B</h3>
                <p>Mel fugit vocent ne, nostrum partiendo at duo. Eum modus suscipiantur ex. Ea fugit convenire intellegat est, at tempor malorum duo. Vel in latine posidonium, mea ea quaeque* numquam. Pro decore libris vivendum ad, nisl dolorem ei duo.</p>
            </div>
            <div class="post-48 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part A</h3>
                <p>Lorem ipsum nisl iudico saperet ea sea, et dolor doctus aliquam sea. Veniam suscipit usu at. Et mea iisque tractatos comprehensam, essent fierent te vel. Et assum impedit eligendi has, animal fabulas adipisci ius et. Eu quando mandamus sea, nisl offendit urbanitas an mei, sit nostrud recusabo id.</p>
            </div>
        </div> <!-- #footer_content -->
        <div class="clear"></div>
    </footer>
    <div class="site-info">
        <p>Copyright &copy; 2014
            <a href="http://jaybeeweb.com/TestSite" title="JayBee Test Site">JayBee Test Site</a>
           - All rights reserved.
            <span>designed and developed by <a href="http://webalacode.com">Web a la Code</a></span>
        </p>
    </div> <!-- .site-info -->
</div> <!-- #wrapper -->

</body>
</html>

FYI: there is no obligation to use XHTML closing slashes on empty elements in HTML.

WebMachine · March 17, 2014, 1:48am

I removed the stray </div> - don’t know how long I’ve been staring at that code without seeing it. Thank you.

When I removed that </div> and moved the blogbar div up to the top, something went haywire with my post query, so I’ll have to figure that one out tomorrow. One question about that though. I used to put all my floated elements first, then I started wondering about the effect on order of content (e.g. screen-readers, etc). So I started putting elements in the order which would be logical for the readers. I’m a bit unsure now about all that.

Closing slashes on empty elements is a habit but I’ve heard that even though it’s not necessary with the html5 doctype, it’s not wrong either. So I haven’t changed my habit there.

Thank you for taking the time to check.

ronpat · March 17, 2014, 2:29am

OK, I was shortsighed.

Let’s swap those divs back into the normal flow order, #main before #blogbar.

This is the general order in which the layers of boxes are arranged that works for me.


    </header> <!-- #masthead .site-header -->
    <div id="content" class="content-area">
        <div id="main" class="site-content">

            <div class="page_nav_top">

            <div id="post-97" class="post-97 post type-post status-publish format-standard hentry category-blog category-first-blog-category category-fourth-blog-category">

                <hr class="comments_start">
                <div class="testsite_comments">

                </div> <!-- .testsite_comments -->
                <div id="respond" class="comment-respond">

                </div> <!-- #respond -->
            </div> <!-- .post -->
        </div> <!-- #main .site-content -->
        <div id="blogbar">
            <div id="sidebar">
                <!--<h6>sidebar_blog.php</h6>-->

            </div> <!-- #sidebar -->
        </div> <!-- #blogbar -->
        [color=blue]<div class="clear"></div>[/color]
    </div> <!-- #content .content-area -->
    <footer role="contentinfo">

NOTE: there should be only ONE [color=blue]<div class="clear"></div>[/color]

EDIT: this is in the desired order.


<!DOCTYPE html>
<!--[if IE 8]>
<html id="ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>The Quick Brown Fox | JayBee Test Site</title>
    <meta name="description" content="We are a church committed to loving God and each other. A people oriented ministry where you will 'grow in grace and in the knowledge of our Lord and Saviour Jesus Christ'.">
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://jaybeeweb.com/TestSite/wp-content/themes/WP-TestSite/style.css" media="screen">
    <link rel="pingback" href="http://jaybeeweb.com/TestSite/xmlrpc.php" />
    <!--[if lt IE 9]>
    <script src="http://jaybeeweb.com/TestSite/wp-content/themes/WP-TestSite/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <link rel="alternate" type="application/rss+xml" title="JayBee Test Site &raquo; The Quick Brown Fox Comments Feed" href="http://jaybeeweb.com/TestSite/?feed=rss2&#038;p=97" />
    <script type='text/javascript' src='http://jaybeeweb.com/TestSite/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
    <script type='text/javascript' src='http://jaybeeweb.com/TestSite/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jaybeeweb.com/TestSite/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jaybeeweb.com/TestSite/wp-includes/wlwmanifest.xml" />
    <link rel='prev' title='Cicero' href='http://jaybeeweb.com/TestSite/?p=105' />
    <link rel='next' title='Werther' href='http://jaybeeweb.com/TestSite/?p=102' />
    <meta name="generator" content="WordPress 3.8.1" />
    <link rel='canonical' href='http://jaybeeweb.com/TestSite/?p=97' />
    <link rel='shortlink' href='http://jaybeeweb.com/TestSite/?p=97' />
    <style type="text/css">
.recentcomments a {
    display:inline !important;
    padding:0 !important;
    margin:0 !important;
}
    </style>
</head>
<body class="single single-post postid-97 single-format-standard">

<div id="wrapper">
    <header id="masthead" class="site-header" role="banner">
        <div id="site_info">
            <h1 class="site-title">
                <a href="http://jaybeeweb.com/TestSite/" title="JayBee Test Site" rel="home">
                    <span id="sitename_1">JayBee</span><br /><span id="sitename_2">WordPress Test Site</span>
                </a>
            </h1>
            <h2 class="site-description">Not just another WordPress site</h2>
        </div> <!-- end of site_info div -->
        <nav role="navigation" class="site-navigation main-navigation">
            <h1 class="assistive-text">Menu</h1>
            <div class="assistive-text skip-link">
                <a href="#content" title="Skip to content">Skip to content</a>
            </div>
            <div class="menu-primary-navigation-container">
                <ul id="menu-primary-navigation" class="menu">
                    <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://jaybeeweb.com/TestSite/">Home</a></li>
                    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://jaybeeweb.com/TestSite/?page_id=6">Who We Are</a></li>
                    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://jaybeeweb.com/TestSite/?page_id=16">Our Services</a></li>
                    <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://jaybeeweb.com/TestSite/?page_id=29">Donations</a></li>
                    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://jaybeeweb.com/TestSite/?page_id=27">Resources</a></li>
                    <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://jaybeeweb.com/TestSite/?page_id=31">Contact</a></li>
                    <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://jaybeeweb.com/TestSite/?page_id=56">Blog</a></li>
                </ul>
            </div>
        </nav> <!-- .site-navigation .main-navigation -->
    </header> <!-- #masthead .site-header -->
    <div id="content" class="content-area">
        <div id="main" class="site-content">
            <div class="page_nav_top">
                <div class="alignleft"><a href="http://jaybeeweb.com/TestSite/?p=105" rel="prev">&larr; Cicero</a></div>
                <div class="alignright"><a href="http://jaybeeweb.com/TestSite/?p=102" rel="next">Werther &rarr;</a></div>
                <div class="clear"></div>
            </div> <!-- .page_nav_top -->
            <div id="post-97" class="post-97 post type-post status-publish format-standard hentry category-blog category-first-blog-category category-fourth-blog-category">
                <h2><a href="http://jaybeeweb.com/TestSite/?p=97">The Quick Brown Fox</a></h2>
                <p class="post_date post_info">Feb 16, 2014</p>
                <p class="post_info post_author">Posted by webmachine</p>
                <div class="post_content">
                    <div id="idTextPanel">
                        <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! <span id="more-97"></span>Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
                        <p>Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! &#8220;Now fax quiz Jack! &#8221; my brave ghost pled.</p>
                        <p>Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard&#8217;s job is to vex chumps quickly in fog. Watch &#8220;Jeopardy! &#8220;, Alex Trebek&#8217;s fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just</p>
                    </div>
                </div>
                <p class="post_info post_cat">filed under <a href="http://jaybeeweb.com/TestSite/?cat=5" title="View all posts in Blog" rel="category">Blog</a>, <a href="http://jaybeeweb.com/TestSite/?cat=6" title="View all posts in First Blog Category" rel="category">First Blog Category</a>, <a href="http://jaybeeweb.com/TestSite/?cat=9" title="View all posts in Fourth Blog Category" rel="category">Fourth Blog Category</a></p>
                <p><a href="http://jaybeeweb.com/TestSite/?p=97#comments" class="comments-link"  title="Comment on The Quick Brown Fox">4 comments</a></p>
                <div class="page_nav_bottom">
                    <div class="alignleft"><a href="http://jaybeeweb.com/TestSite/?p=105" rel="prev">&larr; Cicero</a></div>
                    <div class="alignright"><a href="http://jaybeeweb.com/TestSite/?p=102" rel="next">Werther &rarr;</a></div>
                </div> <!-- .page_nav_bottom -->
                <hr class="comments_start">
                <div class="testsite_comments">
                    <h3 id="comments-title">4 Responses to  "The Quick Brown Fox"</h3>
                    <ol>
                        <li class="comment byuser comment-author-webmachine bypostauthor even thread-even depth-1" id="comment-7">
                            <div id="div-comment-7" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-7">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! &#8220;Now fax quiz Jack! &#8221; my brave ghost pled.</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&#038;replytocom=7#respond' onclick='return addComment.moveForm("div-comment-7", "7", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                        <li class="comment byuser comment-author-webmachine bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-8">
                            <div id="div-comment-8" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-8">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz.</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&#038;replytocom=8#respond' onclick='return addComment.moveForm("div-comment-8", "8", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                        <li class="comment byuser comment-author-webmachine bypostauthor even thread-even depth-1" id="comment-9">
                            <div id="div-comment-9" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-9">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>A wizard&#8217;s job is to vex chumps quickly in fog. Watch &#8220;Jeopardy! &#8220;, Alex Trebek&#8217;s fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&#038;replytocom=9#respond' onclick='return addComment.moveForm("div-comment-9", "9", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                        <li class="comment byuser comment-author-webmachine bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-10">
                            <div id="div-comment-10" class="comment-body">
                                <div class="comment-meta commentmetadata">
                                    <a href="http://jaybeeweb.com/TestSite/?p=97#comment-10">Mar 16, 2014 at 9:44 pm</a>
                                </div>
                                <div class="comment-author vcard">
                                    <img alt='' src='http://1.gravatar.com/avatar/732e2252ea5a995cd326501404440824?s=20&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D20&amp;r=G' class='avatar avatar-20 photo' height='20' width='20' />
                                    <cite class="fn">webmachine</cite>
                                    <span class="says">says:</span>
                                </div>
                                <p>Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox.</p>
                                <div class="reply">
                                    <a class='comment-reply-link' href='/TestSite/?p=97&#038;replytocom=10#respond' onclick='return addComment.moveForm("div-comment-10", "10", "respond", "97")'>Reply</a>
                                </div>
                            </div>
                        </li> <!-- #comment-## -->
                    </ol>
                </div> <!-- .testsite_comments -->
                <div id="respond" class="comment-respond">
                    <h3 id="reply-title" class="comment-reply-title">Write a Reply or Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/TestSite/?p=97#respond" style="display:none;">Cancel reply</a></small></h3>
                    <form action="http://jaybeeweb.com/TestSite/wp-comments-post.php" method="post" id="commentform" class="comment-form">
                        <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p>
                        <p class="comment-form-author">
                            <label for="author">Name <span class="required">*</span></label>
                            <input id="author" name="author" type="text" value="" size="30" aria-required='true' />
                        </p>
                        <p class="comment-form-email">
                            <label for="email">Email <span class="required">*</span></label>
                            <input id="email" name="email" type="text" value="" size="30" aria-required='true' />
                        </p>
                        <p class="comment-form-url">
                            <label for="url">Website</label>
                            <input id="url" name="url" type="text" value="" size="30" />
                        </p>
                        <p class="comment-form-comment">
                            <label for="comment">Comment:</label><br />
                            <textarea id="comment" name="comment" aria-required="true"></textarea>
                        </p>
                        <p class="form-submit">
                            <input name="submit" type="submit" id="submit" value="Post Comment" />
                            <input type='hidden' name='comment_post_ID' value='97' id='comment_post_ID' />
                            <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                        </p>
                    </form>
                </div> <!-- #respond -->
            </div> <!-- .post -->
        </div> <!-- #main .site-content -->
        <div id="blogbar">
            <div id="sidebar">
                <!--<h6>sidebar_blog.php</h6>-->
                <h4>Categories</h4>
                <ul>
                    <li class="cat-item cat-item-6">
                        <a href="http://jaybeeweb.com/TestSite/?cat=6" title="View all posts filed under First Blog Category">First Blog Category</a>
                    </li>
                    <li class="cat-item cat-item-9">
                        <a href="http://jaybeeweb.com/TestSite/?cat=9" title="View all posts filed under Fourth Blog Category">Fourth Blog Category</a>
                    </li>
                    <li class="cat-item cat-item-7">
                        <a href="http://jaybeeweb.com/TestSite/?cat=7" title="View all posts filed under Second Blog Category">Second Blog Category</a>
                    </li>
                    <li class="cat-item cat-item-8">
                        <a href="http://jaybeeweb.com/TestSite/?cat=8" title="View all posts filed under Third Blog Category">Third Blog Category</a>
                    </li>
                </ul>
                <h4>Archives</h4>
                <ul>
                    <li><a href='http://jaybeeweb.com/TestSite/?m=201403'>March 2014</a></li>
                    <li><a href='http://jaybeeweb.com/TestSite/?m=201402'>February 2014</a></li>
                    <li><a href='http://jaybeeweb.com/TestSite/?m=201401'>January 2014</a></li>
                </ul>
            </div> <!-- #sidebar -->
        </div> <!-- #blogbar -->
        <div class="clear"></div>
    </div> <!-- #content .content-area -->
    <footer role="contentinfo">
        <div id="footer_content">
            <div class="post-74 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part D</h3>
                <p>Per ex malis evertitur sadipscing. Sint eripuit scripserit nec no. Pri ubique utroque alienum ex, qui congue putent labore ne, eu qui tincidunt signiferumque mediocritatem. Et* quaeque impedit noluisse sea, volumus fabellas adipiscing pri* an,</p>
            </div>
            <div class="post-72 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part C</h3>
                <p>At veri graeci disputationi vix. Ut amet electram constituam per. Vix eirmod electram et, ad mei quas vivendo euripidis. Nec no sale falli, id ius sint graecis, suas partiendo mea ut. Ex clita interesset quo. Qui integre dignissim at, id elitr tantas sea.</p>
            </div>
            <div class="post-70 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part B</h3>
                <p>Mel fugit vocent ne, nostrum partiendo at duo. Eum modus suscipiantur ex. Ea fugit convenire intellegat est, at tempor malorum duo. Vel in latine posidonium, mea ea quaeque* numquam. Pro decore libris vivendum ad, nisl dolorem ei duo.</p>
            </div>
            <div class="post-48 post type-post status-publish format-standard hentry category-footer-content">
                <h3>Footer Part A</h3>
                <p>Lorem ipsum nisl iudico saperet ea sea, et dolor doctus aliquam sea. Veniam suscipit usu at. Et mea iisque tractatos comprehensam, essent fierent te vel. Et assum impedit eligendi has, animal fabulas adipisci ius et. Eu quando mandamus sea, nisl offendit urbanitas an mei, sit nostrud recusabo id.</p>
            </div>
        </div> <!-- #footer_content -->
        <div class="clear"></div>
    </footer>
    <div class="site-info">
        <p>Copyright &copy; 2014
            <a href="http://jaybeeweb.com/TestSite" title="JayBee Test Site">JayBee Test Site</a>
           - All rights reserved.
            <span>designed and developed by <a href="http://webalacode.com">Web a la Code</a></span>
        </p>
    </div> <!-- .site-info -->
</div> <!-- #wrapper -->

</body>
</html>

WebMachine · March 17, 2014, 2:42pm

That fixed the posts that have comments, but something in the changes totally broke the posts that have no comments and the content is not showing. Only the footer is showing, and all the footer posts have been pushed into the last column. Strangely enough, the content does appear in the source code. I’ll take a look at those pages and see if I can find the issue there today sometime.

WebMachine · March 17, 2014, 7:38pm

I finally found the issue. In my comments.php file, which handles the comments to the posts, I had closed a div in the wrong spot (inside an if-loop), so if there were no comments, the div didn’t close and created all sorts of issues. I found it by comparing the source code of a single page with comments and a single page without comments. Thank you for your help.

ronpat · March 17, 2014, 8:43pm

Hi, WebMachine.

It takes a while to reformat (indent) the tags in a WordPress page to account for them (match them). Just before you posted, I had realized that both pages had similar “stray div” errors which was why fixing one page broke the other.

Very glad to hear that you found the error. Thank you for taking the time to provide feedback and explain what you found.

Cheers.