title: Floating Images mess up Bootstrap Scrollspy
body: <p>I have set up a page using bootstrap. (<a href="http://ethnoma.org/about.html" rel="noreferrer">http://ethnoma.org/about.html</a>) I have a sidebar navigation that is affixed (which is working great). I also am using bootstrap scrollspy on this navigation and all links in the navigation are within the same page (using ancors). Everything was working fine (even with a smooth-scroll plugin added). I simply had to call this script to force Scrollspy to refresh after all content is added to the page (which I placed in the <code>&lt;head&gt;</code>).</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // ScrollSpy
  $(function () {
      $('[data-spy="scroll"]').each(function () {
          var $spy = $(this).scrollspy('refresh')
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My client then asked me to add images to the page. I did so using bootstrap markup and css classes like the following:</p>
  
  <pre><code>&lt;a class="pull-right pad5" href="#"&gt;
      &lt;img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Which makes the parent "a" tag float to the right (in this case) and makes the img into a block element.</p>
  
  <p>Problem is these floated images make the page longer than it was originally. Yet Scrollspy is still switching the active link at the same place. This causes scrollspy to activate links for content farther down the page than you currently are.</p>
  
  <p>I am at a loss for how to force Scrollspy to take the floated images into account when calculating the location of the ID's the ancors link to. Do any of you have an idea how I could fix this. You can see the problem in effect at the following page <a href="http://ethnoma.org/about.html" rel="noreferrer">http://ethnoma.org/about.html</a></p>