CSS: Div's position

Question

I am working with the wordpress theme, it generates the html output of comments automatically. The HTML output is like:

Author says:
August 30, 2011 at 6:43 pm  (Edit)
The comment text...
Reply.

I need to change the position of the elements. For example, I would like to display the author, date/edit and reply on one line. like:

Author says:    August 30, 2011 at 6:43 pm  (Edit)  Reply
The comment text...

As I said above, I can not change the HTML structure, so I need to change the positions of elements with CSS only. However I'm uable to do so. I'll appriciate any help.

Here is the generated 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.jpg" alt="">     

            <cite class="fn">
                <a class="url" rel="external nofollow" href="#">Author</a>
            </cite> 
            <span class="says">says:</span>     

        </div>

        <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>       
        </div>

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

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

jsFiddle link:

http://jsfiddle.net/GLwfW/1/

PS. I know we can change the HTML output by adding custom function in wordpress, but that's not an option.

Answer 1

You can start with display:inline-block; on the first few elements:

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta{
    display:inline-block;
}

.reply{
    position:absolute;
    top:34px;
    left:360px;
}

Then give a position:absolute; to the .reply. You may need to fiddle with these numbers.

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

---

EDIT

Based on @Diodeus's comment re

You can try absolute positioning -- until the author's name is long, which will then force "reply" to be on top of the text that was normally to the left of it.

One thing to do is detach the reply from the DOM and re-insert it. So

New CSS

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta, .reply{
    display:inline-block;
}

Some JS

var a = $('div.reply').detach();

a.appendTo('.comment-meta');

Revised Example: http://jsfiddle.net/GLwfW/10/