Wordpress reply to comment body appears above metadata - css

Question

I am using a custom theme for WordPress, and I have an issue with comment formatting. Reply comments show the body before the comment metadata (user name and date). This is strange because in the HTML the body is clearly after the metadata.
The following is the HTML code as produced by Wordpress:
<div class="comment-list">
<div id="comment-4" class="comment even thread-even depth-1 parent">
<article id="div-comment-4" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<b class="fn">John Seibert</b> <span class="says">says:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://howtolearnalanguagelikeaboss.com/introduction/#comment-4">
<time datetime="2015-12-08T01:40:19+00:00">December 8, 2015 at 1:40 am</time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://howtolearnalanguagelikeaboss.com/wp-admin/comment.php?action=editcomment&c=4">Edit</a></span>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Hi Dave,</p>
<p>Nice web site.</p>
<p>Dad</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://howtolearnalanguagelikeaboss.com/introduction/?replytocom=4#respond' onclick='return addComment.moveForm( "div-comment-4", "4", "respond", "6" )' aria-label='Reply to John Seibert'>Reply</a></div>
</article><!-- .comment-body -->
<div id="comment-7" class="comment odd alt depth-2">
<article id="div-comment-7" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<b class="fn">Dave Seibert</b> <span class="says">says:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://howtolearnalanguagelikeaboss.com/introduction/#comment-7">
<time datetime="2015-12-31T21:42:56+00:00"> December 31, 2015 at 9:42 pm </time>
</a>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Thanks, Dad!</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://howtolearnalanguagelikeaboss.com/introduction/?replytocom=7#respond' onclick='return addComment.moveForm( "div-comment-7", "7", "respond", "6" )' aria-label='Reply to Dave Seibert'>Reply</a></div>
</article><!-- .comment-body -->
</div><!-- #comment-## -->
</div><!-- #comment-## -->
</div><!-- .comment-list -->
Yet this is rendered with with the content "Thanks, Dad!" coming before "Dave says" and the date, as shown here: screenshot of metadata following content.
I realized this might be a floating issue, but the only css I have affecting this section is the following:
.comment-author {
font-size: 1.7rem;
line-height: 2.1rem;
float: left;
}
.comment-metadata {
font-size: 1.7rem;
line-height: 2.1rem;
float: right;
font-weight: 300;
font-style: italic;
}
div.comment {
padding-bottom: 4em;
}
h2.comments-title {
border-style: solid;
border-width: 1px 0 0 0;
margin-top: 2em;
padding-top: .5em;
padding-bottom: 1em;
}
div.reply {
font-size: 1.7rem;
line-height: 2.1rem;
float: right;
border-style: solid;
padding: .1em .3em .1em .3em;
border-width: .1em;
}
Un-floating the .comment-author class does not help, although un-floating the .comment-metadata and div.comment does help, although that changes the design considerably, since then those elements will be left-aligned. Any help would be much appreciated.

Answer 1

You were right in that it was a floating issue, but on the wrong element. Try un-floating .reply. You can fix this with overflow: auto; on the .comment-body class, or by adding a margin to the bottom of each comment.