title: html/css simple image alignment issue
body: <p>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):</p>
  
  <p><img src="https://i.stack.imgur.com/rUrpp.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>Thanks.</p>
  
  <p>P.S.  If you want to see the issue on the site instead, please go to <a href="http://www.momentumnow.biz" rel="nofollow noreferrer">www.momentumnow.biz</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;!-- RK: add a div and width to the top, so elements can't fold on top of each other --&gt; 
  &lt;div class="header"&gt;
      &lt;!-- RK: changed class from header to headerLeft, as added a headerRight --&gt;
      &lt;div class="headerLeft"&gt;
        &lt;div style="float:left"&gt;
          &lt;div id="iPhoneIPad1" style="display:none"&gt;
              &lt;img src="/mn/images/a-350x120.png"  width="350" height="120" alt="Momentum Now"&gt;
          &lt;/div&gt;
  
          &lt;div id="notIphoneIPad1" style="display:inline"&gt;
            &lt;object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="120" id="flashHeader"&gt;
              &lt;param name="movie" value="/mn/images/a-350x120.swf"&gt;
              &lt;param name="play" value="true"&gt;
              &lt;param name="loop" value="true"&gt;
              &lt;!--[if !IE]&gt;--&gt;
              &lt;object class="flash" type="application/x-shockwave-flash" data="/mn/images/a-350x120.swf" width="350" height="120"&gt;
                &lt;param name="play" value="true"&gt;
                &lt;param name="loop" value="true"&gt;
                &lt;!--&lt;![endif]--&gt;
                &lt;a href="http://www.adobe.com/go/getflashplayer"&gt; &lt;img src="/mn/images/a-350x120.png" alt="Get Adobe Flash player version 9.0.28 or later"&gt; &lt;/a&gt;
                &lt;!--[if !IE]&gt;--&gt;
              &lt;/object&gt;
              &lt;!--&lt;![endif]--&gt;
            &lt;/object&gt;
          &lt;/div&gt;
          &lt;!-- RSK added type attribute to script tag --&gt;
          &lt;script type="text/javascript"&gt;
             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";
             }
          &lt;/script&gt;
        &lt;/div&gt;
        &lt;div style="float:left"&gt;
           &lt;img src="/mn/images/header_gradient_spacer.png" width="25" height="120" alt="na" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
       &lt;!-- RK: Added second Flash Header for the right side of top --&gt;
      &lt;div class="headerRight"  &gt;
         &lt;div id="iPhoneIPad2" style="display:none"&gt;
              &lt;img src="/mn/images/HeaderRightFlash.png"  width="370" height="100" alt="Momentum Now"&gt;
         &lt;/div&gt;
  
         &lt;div id="notIphoneIPad2" style="display:inline"&gt;
           &lt;object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="370" height="100" id="flashHeader2"&gt;
              &lt;param name="movie" value="/mn/images/HeaderRightFlash.swf"&gt;
              &lt;param name="play" value="true"&gt;
              &lt;param name="loop" value="true"&gt;
              &lt;!--[if !IE]&gt;--&gt;
              &lt;object class="flash" type="application/x-shockwave-flash" data="/mn/images/HeaderRightFlash.swf" width="370" height="100"&gt;
                &lt;param name="play" value="true"&gt;
                &lt;param name="loop" value="true"&gt;
                &lt;!--&lt;![endif]--&gt;
                &lt;a href="http://www.adobe.com/go/getflashplayer"&gt; &lt;img src="/mn/images/HeaderRightFlash.png" alt="Get Adobe Flash player version 9.0.28 or later"&gt; &lt;/a&gt;
                &lt;!--[if !IE]&gt;--&gt;
              &lt;/object&gt;
              &lt;!--&lt;![endif]--&gt;
            &lt;/object&gt;
         &lt;/div&gt;
  
        &lt;script type="text/javascript"&gt;
          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";
          }
        &lt;/script&gt;         
        &lt;p class="affiliate" align="right"&gt;&lt;a href="/"&gt;Affiliate Care Members Only&lt;/a&gt;&lt;/p&gt;            
      &lt;/div&gt;
  
      &lt;!-- 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 --&gt;
      &lt;div class="headerCenter"&gt;
          &lt;p class="headerCenter"&gt;Inspiring Movement. &lt;br /&gt;&lt;br /&gt;  Revealed by outstanding results.&lt;/p&gt;
      &lt;/div&gt;              
      &lt;br style="clear:both; line-height: 0" /&gt;
  &lt;/div&gt;  
  &lt;div class="mainnav"&gt;
  </code></pre>