title: IE float right issue
body: <p>I'm having an issue in IE9 with a span (<code>span.share</code>) that I'm trying to <code>float:right</code> next to a div that is <code>float:left</code> all of this inside a span. </p>
  
  <p>jsfiddle (remember to view in IE): <a href="http://jsfiddle.net/MgW6R/2/" rel="nofollow noreferrer">http://jsfiddle.net/MgW6R/2/</a></p>
  
  <p>This is what it looks like in IE9:</p>
  
  <p><img src="https://i.stack.imgur.com/yUge6.jpg" alt="enter image description here"></p>
  
  <p>This is how it should look (and looks like in other browsers):</p>
  
  <p><img src="https://i.stack.imgur.com/YiLR4.jpg" alt="enter image description here"></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="contentWrapper"&gt;
      &lt;div class="content"&gt;
          &lt;span class="contentItem"&gt;
              &lt;a href="javascript: void(0);"&gt;
                  &lt;img src="http://www.example.com/image1.jpg"&gt;
              &lt;/a&gt;
              &lt;div class="detailsWrapper"&gt;
                  &lt;div class="name-date"&gt;
                      &lt;span class="date"&gt;Jul 04: &lt;/span&gt;
                      &lt;span class="userName"&gt;Christie&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;span class="share"&gt;&lt;/span&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;div class="caption"&gt;Watching the fireworks in NY without the crowds, heat and concussion via tv #cahs&lt;/div&gt;
              &lt;/div&gt;
          &lt;/span&gt;
          &lt;span class="contentItem"&gt;
              ...
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.contentWrapper {
      overflow: hidden;
      position: relative;
  }
  .content {
      margin-left: 256px;
      padding-top: 14px;
      position: relative;
      white-space: nowrap;
  }   
  .contentItem {
      display: inline-block !important;
      margin: 0 14px 0 0;
      vertical-align: top;
  }
  .contentItem a {
      display: block;
  }
  .contentItem img {
      height: 450px;
  }
  .contentItem .detailsWrapper {
      color: #E3E3E3;
      position: relative;
  }
  .contentItem .detailsWrapper .name-date {
      float: left;
      padding: 5px 0 0;
  }
  .contentItem .detailsWrapper .share {
      background: url("http://www.connectionsacademy.com/_images/teenWebsite/share-btn-sprite.png") no-repeat scroll 0 0 transparent;
      cursor: pointer;
      float: right;
      height: 23px;
      width: 91px;
  }
  .clear { clear: both; }
  .contentItem .detailsWrapper .caption {
      margin-top: 10px;
      white-space: normal;
      width: 450px;
      word-wrap: break-word;
  }
  </code></pre>
  
  <p><strong>NOTE:</strong>
  I originally had <code>span.share</code> <code>position:absolute</code> but I had to change it because it was causing issues with other elements on the page.</p>