CSS: Div’s position

2 Views

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:

Read More
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.

Post Views: 2

Related posts

Leave a Reply

4 comments

  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/

  2. You can change the position of the items, by adding “float:left”, but this will not work in this case because you need the reply to appear before “The comment text”. CSS cannot rearrage the ORDER of the elements.

    When “painted into a corner” like this, you can always re-write the HTML on the client using jQuery. Brutal but sometimes that’s the only option.

  3. This will be very difficult, there is a way but it’s very limited. If you can guarantee the pixel height of the actual comment body (which I presume you can’t) then you can inline the elements, take the reply element out of the flow (positioning it at the bottom of the container) and set a padding on the container to force it down. See this fiddle for an example. It achieves the desired effect but won’t hold up well to multi-line comments.

  4. Add this to your css

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

    Here is the jsfiddle

    Edit: Seens I missed the reply button. It can be placed absolutely in the top right corner. With:

    .comment-body{ position:relative; }
.reply { right:0; top:0; position:absolute; }

    But that could overlap the text if the text got to long. Otherwise you would have to change the html.