Question

I’m having an issue in IE9 with a span (span.share) that I’m trying to float:right next to a div that is float:left 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

<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>

css

.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;
}

NOTE:
I originally had span.share position:absolute but I had to change it because it was causing issues with other elements on the page.

Answer 1

From the look of it you need to specify a width at some point. Since they are all set to auto it is taking as much space as it can. I would try setting some specific widths as well as a width of 100% to the .detailsWrapper.

This should make sure that width never exceeds the parent, but that also means you need to make sure the part width has bounds.

If the widths are dynamic try using jQuery to set them one the image is loaded and use the image width to set the .contentItem width and it should ensure that everything stays the same width.