Float: Right Not Working

Question

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>

Answer 1

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/

Answer 2

You are using position:absolute; as well as floats for the same elements. Try using just floats.

DEMO