float right not working in IE
Question
I'm trying to float an image to the right. This should be simple. It looks fine in FF and Chrome, but in IE, the text doesn't wrap around the image. I think it has something to do with the style I'm giving to my paragraph tags. Anyway, any insight would be appreciated!
style:
.story {
margin: 0 0 0 360px;
padding-top: 30px;
padding-left: 30px;
max-width: 900px;
width: 75%;
}
.story p {
line-height: 150%;
font-size: 20px;
}
.half-embed {
float: right;
position:relative;
margin-right:-100px;
margin-left:20px;
display: inline !important;
clear:both;
}
.imageborder {
border: 1px solid lightgray;
padding: 10px;
}
html:
<div class="story">
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p>
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
</div>
3 answers
solution1
0 2013-11-20 22:23:42
You're setting display: inline... you can't float inline elements.
Also, be sure that you're setting the doctype. Otherwise, you'll be in quirks mode in IE.
First line of html should be:
<!doctype html>
Remove the image from the paragraph. It has it's own block level scope, and should force the other elements to hang below it. Not sure why it doesn't do it consistently across browsers, but that's how it should work.
solution2
0 2013-11-20 23:25:11
You are floating an image, that is in a display: inline-block element (by default) == <p>
So the <p> take up the whole width of the veiwport, even if your image is floated. So your text can not wrapping around your image (with the hTML provided here), because your text is in other <p> 's:
<p>Now ....</p>
<p><img src="images/myimage.jpg" class="half-embed imageborder" /></p>
<p>...</p>
To have text wrap around an image, you should do this:
<p>
<img src="images/myimage.jpg" class="half-embed imageborder" alt="">
Now we are engage......//oper that we
</p>
.half-embed {
float: right;
margin: 0 0 20px 20px;
display: block;
}
solution3
0 2013-11-21 14:36:08
Mark's answer works on my test page, but not on my actual page, so there is something missing. However, overall, IE7 is just broken. My float works everywhere but there, even higher versions of IE. So I'm going to simplify the page for IE7 and warn viewers of that fact.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.