CODEWITHSUNDEEP
csscss-floatinternet-explorer-7
Adam Heath
Adam Heath

Reputation: 4743

IE7 image float right in positioned container

I am trying to get an image to appear in a sites left gutter, so the right hand side of the image is always visible next to the site content. This works in IE8+ and on other browsers, just not in IE7, it seems to be ignoring the float right.

See in IE7 mode (and IE8 or Chrome or FF for desired result): http://jsfiddle.net/ehEym/2/embedded/result/ - basically the blue bar on the right of the image should be visible next to the site

Including code:

<div id="main"><h1>The main content</h1><p>Text</p></div>
<div id="left">
  <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png" />
</div>

Style:

#main {
    width:300px;
    margin:0 auto;
    background-color:grey;
}
#left {
    position: fixed;
    display: block;
    top: 0px;
    left: 50%;
    border: 0px;
    margin-left: -350px;
    padding: 0px;
    overflow: hidden;
    z-index: 100000;
    width: 200px;
}
#left img {
    border: 0px;
    float: right;
}

Any ideas?

Upvotes: 0

Views: 229

Answers (2)

ScottS
ScottS

Reputation: 72261

It appears as though IE7 is not allowing the img to overflow to the left side of the #left wrapper even though it has float: right applied. So the narrower width of the wrapper div compared to the wider width of the img is keeping it from doing anything but aligning its left edge to the left edge of the wrapper. The fix for this can be seen in this fiddle, where I have added a negative margin-left equal to the img width:

#left img {
    border: 0px;
    float: right;
    margin-left: -640px; /* <-- equal to img width */
}

I recommend doing this in a targeted way only to IE7. While it did not seem to adversely affect either Firefox or IE9+ (I did not test Webkit), it did cause issues in display for IE8. Since it is not needed for the other browsers, then using conditional comments or some other means of targeting IE7 for this CSS should be used.

Upvotes: 1

ignacioricci
ignacioricci

Reputation: 1276

The CSS Code you presented is a bit strange considering what you want to do because it's difficult to calculate where the image should place itself with a fixed position near another element with a defined width in px. IE7 must be acting up because of that.

Basically what you need to do is to have one column with the image on one side, and the rest of the content on the other side.

Updated CSS CODE

body {
    height:100%;
}
#main {
    width:80%;
    padding-left:20%;
}
#left {
    position: fixed;
    top:0;
    left:0;
    width:20%;
    height:100%;
}
#left img {
    display:block;
    width:100%;
    height:100%;
}

http://jsfiddle.net/ehEym/4/embedded/result/

Does that work for you? Or you need the content centered on the page?

Upvotes: 0

Related Questions