happinessiskey
happinessiskey

Reputation: 97

Float: Right Not Working

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

Answers (2)

Mark Schultheiss
Mark Schultheiss

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

Kinburn101
Kinburn101

Reputation: 1162

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

DEMO

Upvotes: 1

Related Questions