Need help from a CSS person for aligning my gravatar!

Hi, I hope someone who’s good at CSS can help me with this. I’m using Cutline 1.2 and I’ve added a gravatar beside the post title, but I’m having trouble getting it to align correctly. (Funny enough it shows correctly in Safari, but not in any other browser.) My CSS looks like this:

h2 { font-size: 2.0em; }

h2 a { color: #000; text-decoration: none; }

h2 a:visited { color: #555; text-decoration: none; }

h2 a:hover { color: #090; text-decoration: none; }

.posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; }

.pages h2, h2.page_header { margin: 0 0 0.75em 0; padding: 0 0 0.6em 0; background: url(‘images/hr_title_sep.gif’) 0 100% no-repeat; }

.avatar{ float:right; display: inline; padding:0 2px 0 2px; }

h2.archive_head { font-weight: bold !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 3px solid #000 !important; background: url(‘images/hr_dot_black.gif’) 0 100% repeat-x !important; }

And then in my index.php and my single.php it looks like this:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<h2>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?>

<div class=”avatar”>
<?php echo get_avatar( get_the_author_email(), ’48’ ); ?>
</div></h2>

<h4><?php the_author() ?> · <?php the_time(‘l, F j, Y’); ?> at <?php the_time(‘g:i a’); ?> <?php edit_post_link(‘Edit’, ”); ?>
</h4>

What am I missing here? I just want the gravatar to be aligned on the right side opposite my title (h2) and post info (h4). Right now it’s placing the avatar between the two lines, or it’s pushing the h4 line down below it. I’m sure it’s a simple fix, right? But….. I’m fairly new to CSS.

I’d appreciate anyone’s help.