I'm dealing with the wordpress theme, it creates the html creation of comments instantly. The HTML output is much like:

Author states:

August 30, 2011 at 6:43 pm  (Edit)

The comment text...


I have to change the positioning of the elements. For instance, I must display the writer, date/edit and reply on a single line. like:

Author states:    August 30, 2011 at 6:43 pm  (Edit)  Reply

The comment text...

When I stated above, I am unable to alter the HTML structure, so I have to alter the positions of elements with CSS only. However I am uable to do this. I'll appriciate any help.

This is actually the produced html:

<div class="comment-body" id="div-comment-33">

        <div class="comment-author vcard">

            <img width="48" height="48" class="avatar avatar-48 photo" src="http://i55.tinypic.com/21buau9.digital" alt="">

            <cite class="fn">

                <a class="url" rel="exterior nofollow" href="#">Author</a>


            <span class="states">says:</span>


        <div class="comment-meta commentmetadata">

            <a href="#comment-33">August 30, 2011 at 6:43 pm</a>&nbsp&nbsp

            <a title="Edit comment" href="#" class="comment-edit-link">(Edit)</a>


        <p>The comment text...</p>

        <div class="reply">Reply</div>


jsFiddle link:


PS. I understand we are able to alter the HTML output with the addition of custom function in wordpress, but that is no option.

You can begin with display:inline-block around the first couple of elements:



.comment-author, .comment-meta


Then provide a position:absolute towards the .reply. You may want to fiddle with one of these amounts.

Example: http://jsfiddle.internet/GLwfW/9/


According to @Diodeus's comment re

You can test absolute positioning -- before the author's title is lengthy, that will then pressure "reply" to become on the top from the text which was normally left from it.

One factor to complete is remove the reply in the DOM and re-place it. So




.comment-author, .comment-meta, .reply

Some JS

var a = $('div.reply').remove()


Modified Example: http://jsfiddle.internet/GLwfW/10/

You are able to change the positioning of the products, with the addition of "float:left", but this can not operate in this situation since you need damaged whipped cream appear before "The comment text". CSS cannot rearrage an order from the elements.

When "colored right into a corner" such as this, you could re-write the HTML around the client using jQuery. Brutal but sometimes that's your best option.

Add this for your css

.comment-author, .comment-meta  

This is actually the jsfiddle

Edit: Seens I skipped the reply button. It may be placed absolutely within the top right corner. With:



But that may overlap the written text when the text reached lengthy. Otherwise you would need to alter the html.

This is very hard, there's a means but it is limited. If you're able to ensure the pixel height from the actual comment body (that we presume you cannot) you'll be able to inline the sun and rain, go ahead and take reply element from the flow (positioning it at the end from the container) and hang a padding around the container to pressure it lower. See this fiddle to have an example. It accomplishes the preferred effect but will not endure well to multi-line comments.