html/css simple image alignment issue - html

Question

I've got a header where I'm adding a little gradient spacer image, and it's not moving where it needs to be (see red arrow for desired location):
I've tried several different versions of the img tag, and adding an enclosing div either with or without the float:left style, but so far no dice. What am I doing wrong/how do I fix it? Note the gradient spacer image name is header_gradient_spacer.png.
Thanks.
P.S. If you want to see the issue on the site instead, please go to www.momentumnow.biz
<div class="container">
<!-- RK: add a div and width to the top, so elements can't fold on top of each other -->
<div class="header">
<!-- RK: changed class from header to headerLeft, as added a headerRight -->
<div class="headerLeft">
<div style="float:left">
<div id="iPhoneIPad1" style="display:none">
<img src="/mn/images/a-350x120.png" width="350" height="120" alt="Momentum Now">
</div>
<div id="notIphoneIPad1" style="display:inline">
<object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="120" id="flashHeader">
<param name="movie" value="/mn/images/a-350x120.swf">
<param name="play" value="true">
<param name="loop" value="true">
<!--[if !IE]>-->
<object class="flash" type="application/x-shockwave-flash" data="/mn/images/a-350x120.swf" width="350" height="120">
<param name="play" value="true">
<param name="loop" value="true">
<!--<![endif]-->
<img src="/mn/images/a-350x120.png" alt="Get Adobe Flash player version 9.0.28 or later">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!-- RSK added type attribute to script tag -->
<script type="text/javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) {
document.getElementById("iPhoneIPad1").style.display = "inline";
document.getElementById("notIphoneIPad1").style.display = "none";
}
</script>
</div>
<div style="float:left">
<img src="/mn/images/header_gradient_spacer.png" width="25" height="120" alt="na" />
</div>
</div>
<!-- RK: Added second Flash Header for the right side of top -->
<div class="headerRight" >
<div id="iPhoneIPad2" style="display:none">
<img src="/mn/images/HeaderRightFlash.png" width="370" height="100" alt="Momentum Now">
</div>
<div id="notIphoneIPad2" style="display:inline">
<object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="370" height="100" id="flashHeader2">
<param name="movie" value="/mn/images/HeaderRightFlash.swf">
<param name="play" value="true">
<param name="loop" value="true">
<!--[if !IE]>-->
<object class="flash" type="application/x-shockwave-flash" data="/mn/images/HeaderRightFlash.swf" width="370" height="100">
<param name="play" value="true">
<param name="loop" value="true">
<!--<![endif]-->
<img src="/mn/images/HeaderRightFlash.png" alt="Get Adobe Flash player version 9.0.28 or later">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script type="text/javascript">
if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) {
document.getElementById("iPhoneIPad2").style.display = "inline";
document.getElementById("notIphoneIPad2").style.display = "none";
}
</script>
<p class="affiliate" align="right">Affiliate Care Members Only</p>
</div>
<!-- RK: moved this after the headerRight, as that's what's needed to make it span the difference of the left and right header.
Also, moved 'Affiliate Care Members' to next div section -->
<div class="headerCenter">
<p class="headerCenter">Inspiring Movement. <br /><br /> Revealed by outstanding results.</p>
</div>
<br style="clear:both; line-height: 0" />
</div>
<div class="mainnav">

Answer 1

Because the div that contains the flash and image has fixed width which is not enough to have both in row, it puts the gradient image below. To fix the problem just remove the width from div.headerLeft in style.css