Reputation: 97
I'm trying to get three paragraphs of text to float to the right of an image. However, the float: right; isn't working. Instead, the text and background-color (that I added for testing) is placed above the image, covering it completely.
What the heck am I missing?
<div style="width: 100%; max-width: 1200px; height: 500px; background-color: purple;">
<a href="url"><img src="url" style="max-width: 406px; width: 30%; height: auto; float: left; background-color: red; position: absolute;"></a>
<div style="float: right; background-color: green; position: absolute; max-width: 790px; width:69%;">
<p> Text..... </p>
<p> More Text</p>
<p>Final Paragraph </p>
</div>
</div>
Upvotes: 2
Views: 157
Reputation: 34227
position: absolute; - setting this in the "green" text does just that, absolute and thus the float is not "inline" with the image
<div style="float: right; background-color: green; max-width: 790px; width:69%;">
Fiddle with the change made: http://jsfiddle.net/mschultheiss/zghbz40p/
Upvotes: 0
Reputation: 1162
You are using position:absolute;
as well as floats for the same elements. Try using just floats.
Upvotes: 1