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. jsfiddle (remember to view in IE): http://jsfiddle.net/MgW6R/2/This is what it looks like in IE9:
This is how it should look (and looks like in other browsers):
html\[code\]<div class="contentWrapper"> <div class="content"> <span class="contentItem"> <a href="javascript: void(0);"> <img src="http://www.example.com/image1.jpg"> </a> <div class="detailsWrapper"> <div class="name-date"> <span class="date">Jul 04: </span> <span class="userName">Christie</span> </div> <span class="share"></span> <div class="clear"></div> <div class="caption">Watching the fireworks in NY without the crowds, heat and concussion via tv #cahs</div> </div> </span> <span class="contentItem"> ... </span> </div></div>\[/code\]css\[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\]NOTE: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.