View Full Version : Need help with authorbox

04-15-2011, 12:16 PM
Hey guys,

so I made this authorbox based on this tutorial:


However, it does not display correctly on my website. It displays the gravatar image in one line and the description under it. How can I make it even on one line?

Here is the code:

<div class="author-box">
<div class="author-left">
<div class="author-pic"><?php echo get_avatar( get_the_author_email(), '80' ); ?></div>
<div class="author-right">
<div class="author-name"><?php the_author_meta( "display_name" ); ?></div>
<div class="author-bio"><?php the_author_meta( "user_description" ); ?></div>
<div class="author-url"><?php if (get_the_author_url()) { ?><a href="<?php the_author_url(); ?>">Visit <?php the_author(); ?>'s website</a><?php } else { } ?></div>
<div class="clear"></div>


.author-box { padding: 10px; background: #ccc; border: 1px solid #333;}
.author-left {float:left; width: 80px; margin: 0 15px 0 0;}
.author-right {float:left; font-size: 13px; margin: 5px 0 0 10px;}
.author-pic {border: 1px solid: #ccc;}
.author-name {font-weight:bold;}
.author-bio {padding: 5px 0 5px 0;}
.author-url {color: #555;}
.author-url a {color: #000;}
.author-url a:hover {color: #333;}
.clear {clear:both}

And here is the website:

Thank you guys in advance for helping me!

04-15-2011, 04:48 PM
It looks like it is enough to float only the div containing the image:

.author-right {font-size: 13px; margin: 5px 0 0 10px;}

Or give the right div a certain width, as long as you have given a certain width to the left one

.author-right {float:left; font-size: 13px; margin: 5px 0 0 10px;width:510px;}

It is amusing that the guy at:
has not created his own box following his own advices. He used, in fact, the first method I have told you: just the left element floated :)

04-16-2011, 04:53 PM
hey thanks,

now that I checked through you are right. And yes, strange that he did not use his own way haha