Hi all,

 

I have a little problem with text not wrapping around the top my image.

 

See attached the "AS IS" screenshot and the "DESIRED EFFECT" screenshot.

 

I did play around with floating the picture inside it's element to the left and it appears the floating works, however, I'd like to have the image in the left bottom with the text nicely wrapping on top and to the right of it.

 

What CSS markup do I need? This probably quite easy to fix, however I've been playing around with it for about 15 mins. and no solution yet...

 

Thanks for your help!!

Link or code would be helpful.

html as follows:

 

<div id="leonphoto" class="image">

<img id="picleon" src="file://localhost/Users/leonfassbender/Documents/Graphic%20Design/Projects/leonfassbender.com/Images/leon2.gif" alt="leon2" width="100" height="100" />

</div><!-- /leonphoto -->

<p>

Morbi quis dolor vel nisl interdum blandit vita. Morbi quis dolor vel nisl interdum blandit vitae a dolor. Phasellus mattis egestas urna, quis accumsan libero tempus ac. Nunc tempor tellus pellentesque augue sodales faucibus. Suspendisse euismod mi nec eros suscipit sagittis. Ut ac ante ac tortor viverra lacinia. Duis libero augue, euismod a fringilla vitae, commodo et eros. Aliquam pretium turpis consectetur leo placerat eget hendrerit elit blandit. Vivamus ultricies risus a nibh ornare ut lobortis elit condimentum. My name is Leon Fassbender, I'm a Web Designer and Perch CMS Specialist. Morbi quis dolor vel nisl interdum blandit vitae a dolor.

</p>

<!-- /paragraph -->

</div>

 

CSS as follows:

 

#aboutcontent {

position: absolute;

margin-left: 283.5px;

margin-top: 379px;

max-width: 393px;

max-height: 416px;

}

 

#leonphoto {

float: left;

margin-top: 100px;

padding-right: 5px;

padding-bottom: 5px;

}

Try putting the code for the floated image at the place in the text that you want it to start floating.

<p>
Morbi quis dolor vel nisl interdum blandit vita. Morbi quis dolor vel nisl interdum blandit vitae a dolor. Phasellus mattis egestas urna, quis accumsan libero tempus ac. Nunc tempor tellus pellentesque augue sodales faucibus. Suspendisse euismod mi nec eros suscipit sagittis. Ut ac ante ac tortor viverra lacinia. Duis libero augue, euismod a fringilla vitae, commodo et eros. Aliquam pretium turpis consectetur leo placerat eget hendrerit elit blandit. 

<div id="leonphoto" class="image">
<img id="picleon" src="file://localhost/Users/leonfassbender/Documents/Graphic%20Design/Projects/leonfassbender.com/Images/leon2.gif" alt="leon2" width="100" height="100" />
</div><!-- /leonphoto -->

Vivamus ultricies risus a nibh ornare ut lobortis elit condimentum. My name is Leon Fassbender, I'm a Web Designer and Perch CMS Specialist. Morbi quis dolor vel nisl interdum blandit vitae a dolor.
</p>
<!-- /paragraph -->
</div>

 

Note, the text above isn't the same as the text in your desired effect so I can't show you exactly where to put the image code, but in your desired effect it might be just before quisque rutrum. Since text varies a little between browsers you may find it looks slightly different in other browsers.

Thanks Wickham. That was a very good idea :-)

 

I tried it but as you said, the results are different across browsers.... I guess for the moment I'll stick with the standard float, top left.

 

Thanks!

As mentioned, you need to put the image towards the bottom of the content, if that is where you want it to appear.

 

<style type="text/css">
p img {
float: left;
margin: 0px 10px 0px 0px;

}
</style>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie sapien eu magna lobortis elementum. Ut adipiscing felis ac risus commodo eu elementum purus porttitor. In in odio odio. Suspendisse potenti. Nam a suscipit erat. Duis pulvinar rutrum dolor, non fermentum velit consequat vitae. Nullam tristique ipsum vitae odio bibendum non euismod odio bibendum. Duis venenatis hendrerit velit eu fermentum. Integer suscipit mauris ut odio posuere sit amet sodales enim consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie sapien eu magna lobortis elementum. Ut adipiscing felis ac risus commodo eu elementum purus porttitor. In in odio odio. 

<img src="" width="100" height="100" />

Suspendisse potenti. Nam a suscipit erat. Duis pulvinar rutrum dolor, non fermentum velit consequat vitae. Nullam tristique ipsum vitae odio bibendum non euismod odio bibendum. Duis venenatis hendrerit velit eu fermentum. Integer suscipit mauris ut odio posuere sit amet sodales enim consectetur.

</p>

 

The rest is pretty simple, float the image left and give a bit of margin so that the text doesn't touch.

 

You shouldn't have any cross browser issues if the text and images are contained in a div, avoid absolute positioning and just stick with floats.

 

This isn't exactly your desired affect but it hopefully helps.

Thanks all! It worked but was not quite the effect I wanted. For the moment I just leave the pic left top.

 

Thanks anyway for your helpful suggestions!