[Resolved] Text wraps only half of my image

[Ben]

I have a tall, narrow image that I want inserted in the body of a page; the full height of sevaral paragraphs of text….next to the text on the right.

I align it to the right and only the first two paragraphs of text ‘wrap’ next to the image. The rest of the text remains below. ANy suggestions? I have attempted to float the image to the right using custom CSS with this but it doesn’t work.

.photo {
margin: 10px;
padding: 5px;
background: #FFF;
float: right;
border: 1px solid #E0E0E0;
}

Thanks.

[Tom]

Try giving the image a class of “alignright”, so it would look like: <img src=".." class="alignright" />

If you want the text to stop wrapping a certain point, add this HTML in the “Text” tab where you want it to stop:

<div class="clear"><!-- clear float --></div>

[Ben]

Thanks for the reply Tom, still not working and driving me nuts! i cannot see anything in the html that is causing the wrapping to stop. I have tried using the visual editor ‘alignright’ and that is what shows in the html.

The first two paragraphs wrap, then it stops.Surely it shouldnt be so hard to get all the text text to the image?

I did add CSS to make the h1, h2, h3 header text wrap for an image on another page;

h1, h2, h3, h4, h5, h6 {
clear: none;
}

Is this messing things up?

[Tom]

Do you have a link to the page you’re working on? Wouldn’t mind seeing what’s going on 🙂

[Ben]

So this is the page at the moment;
http://wisemindshypnotherapy.co.uk/reducing-stress/

What I need is for the picture to be the exact height of the text in the body, and remain in scale as the page is re-sized. So, I attempted to move the image from the widget container into the main body and just float it to the right. I will make it a bit prettier with a border or whatever if I can get the layout working.

This is what I get;
http://wisemindshypnotherapy.co.uk/sessions/

As you can see, text wrapping stops after a couple of paragraphs.

Thanks for your help!

[Ben]

This page I needed the header text to wrap the image;
http://wisemindshypnotherapy.co.uk/about-me-2/

Here is all of the custom CSS I currently have applied;

#content .entry-content h3 { margin-bottom: 0; }
a,
a:visited {
text-decoration: underline;
}
.footer-widget-1 {
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
clear: none;
}
.photo {
margin: 10px;
padding: 5px;
background: #FFF;
float: right;
border: 1px solid #E0E0E0;
}

[Tom]

Interesting, where you have the class “website-links”, try replacing this with something different.

GP looks for classes with “site” in them and clears them as main level components (site-header, site-footer etc..).

If you change those class names, it should fix it 🙂

[Ben]

What a legend you are! I just removed the class altogether; now works fine. Many thanks!

http://wisemindshypnotherapy.co.uk/reducing-stress/

[Tom]

Glad I could help 🙂

[Author]

Posts