Side by side elements

[TheNerd]

Hey guys, quick question: How can I get the green dot, display name and user group on the right side of the avatar? I want the dot and name above the group, as it's showed, but just to the right of the avatar. I've tried several things, but it didn't work.

 

Here's the code I have in the template:

SPOILER: Click to show

<div class="comment-author_info">

      <span class="comment-avatar">
          $[post.created_by_user.avatar_small]
      </span>

      <span class="comment-author">
{if $[post.created_by.is_online]}
<img src="image URL" alt="Online"/>
{else}
<img src="Image URL" alt="Offline"/>
{/if}
               $[post.created_by.link]
</span><br>

       <span class="comment-group">
{if $[post.created_by.group]}
$[post.created_by.group.stars]
{else}
$[post.created_by.rank.stars]
{/if}
</span>


</div>

[TheNerd]

RedBassett? Could you please give me a hand?

[RedBassett]

I don't tend to handle CSS, but since you tagged me, can you link to a live example?

[TheNerd]

Aug 28, 2013 15:53:44 GMT -8 RedBassett said:

I don't tend to handle CSS, but since you tagged me, can you link to a live example?

Well I saw you alot in the themes board, so I figured you're the guy to ask. Anyways, the screenshot was from this thread. All I'm trying to do is get the dot, name and rank moved to the right of the avatar, similar to the micro profile

[TheNerd]

Bump

[Brian]

You've got a bit of CSS in your style sheet that's telling it to float to the left.

.comment-author { float: left; vertical-align:middle; display: inline; }

Removing that should make it show in the proper order.

[TheNerd]

Aug 29, 2013 15:05:48 GMT -8 Brian said:

You've got a bit of CSS in your style sheet that's telling it to float to the left.

.comment-author { float: left; vertical-align:middle; display: inline; }

Removing that should make it show in the proper order.

Thanks for the reply brian. I just did that, but it didn't move

[Brian]

Looks like it moved to me.

nerdydigital.boards.net/thread/104

[TheNerd]

Didn't for me

[TheNerd]

Bump
Brian?

[Brian]

I dunno what you changed, but it's different from the last time I looked. And Chrome seems to want to render it differently again.

Try adding float: left; to the .comment-avatar class.

[TheNerd]

Yay, it worked! Thanks!

And, as always, I always have a second issue. How can I get the labels to appear inline with the rest of the line?

[Chris]

Throw some span.tags span.labels {display:inline-block; float:none;} at it and see if it sticks!

[TheNerd]

Fantastic. Thanks for all the help guys! You're all awesome