[SOLVED] CSS Problem with float in Firefox only

I'm struggling with a CSS problem that appears only in Firefox on my home page. I've tested with Chrome, IE, Safari, and Opera and it looks fine. In Firefox (which is 1/3 of my visitors right now) my float smushes up to the menu bar and I lose some spacing below.

I'm sure my CSS skills are lacking and there probably was an easier way to do this but this is what I've done so far:

CSS:

.featured-article {
margin: 0;
padding: 0;
position: relative;
float: left;
}

#featured-article-space {
position: absolute;
top: -355px;
left: 538px;
width: 213px;
height: 343px;
background-color: transparent;
}

#featured-article-box {
position: absolute;
top: -310px;
left: 538px;
width: 213px;
height: 299px;
background-color: transparent;
border: 1px solid #575757;
}

.featured-article-headline{
background:#7CC6A2 none repeat scroll 0 0;
padding:5px;
width: 203px;
}

.featured-article-headline h1, .featured-article-headline h2 {
color:#FFFFFF;
font-size:1.5em;
padding:5;
margin:0;
}

.featured-article-headline h2 a:link, .featured-article-headline h2 a:visited, .featured-article-headline h2 a:active, .featured-article-headline h1 a:link, .featured-article-headline h1 a:visited, .featured-article-headline h1 a:active {
color:#FFFFFF;
text-decoration:none;
}

.featured-article-headline h2 a:hover, .featured-article-headline h1 a:hover {
color:#575757;
text-decoration:none;
}

#featured-article-placement{
position: absolute;
top: -310px;
left: 543px;
width: 210px;
height: 295px;
margin-bottom: 10px;
}

.featured-article-header{
}

.featured-article-header h1, .featured-article-header h2 {
color:#575757;
font-size:1.0em;
font-weight: bold;
margin-top:2px;
padding-left: 4px;
padding-bottom: 0;
}

.featured-article-header h2 a:link, .featured-article-header h2 a:visited, .featured-article-header h2 a:active, .featured-article-header h1 a:link, .featured-article-header h1 a:visited, .featured-article-header h1 a:active {
color:#D39907;
text-decoration:none;
width: 213px;
}

.featured-article-header h2 a:hover, .featured-article-header h1 a:hover {
color:#575757;
text-decoration:none;
}

Code:

div class="featured-article"><div id="featured-article-space"><div class="featured-article-headline"><h2>Featured Article</h2></div></div></div>

<div class="featured-article"><div id="featured-article-box"></div></div>


<div class="featured-article"><div id="featured-article-placement">
<?php $my_query = new WP_Query('category_name=featured-article&showposts=1' );
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php bfa_post_headline('<div class="featured-article-header">','</div>'); ?>
<?php bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>'); ?>
<?php endwhile; ?>
</div></div>

The website is: http://coloradoanimalwelfare.org

Please help.