0

I can't float my image the way I want in the post editor. I need to have it sit next to several separate elements (2 different headings + a paragraph), not just one element. And I see no way to do that.

Any suggestion would be welcome.

enter image description here

drake035
  • 3,955
  • 41
  • 119
  • 229
  • I don't understand your question. Can you annotate your image to show how you want your image to set? – skribe Feb 20 '15 at 10:33
  • I did include an image showing how I want my image to set. The problem is that currently I can't make it float next to several separate HTML elements (here an h3, h4 and p elements). If I float it next to the p element for example, the some of this p element will be displayed above or underneath the image. Same with the headings. – drake035 Feb 20 '15 at 10:51
  • Ok, sorry, I see what you are wanting now. How familiar are you with using the HTML editor instead of the Visual editor in Wordpress? (i.e. do you know much HTML?) – skribe Feb 20 '15 at 11:47

1 Answers1

1

I would do it in the text tab of the editor like this.

<img src="my image" style="float:right" />
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>

You want the <img> with the float:right property first, then the rest of headings and the paragraph

Here is a demo http://jsfiddle.net/d55psoqq/

Note: the Wordpress "alignright" property usually added when you add an image with the media manager, will do the same as the style="float:right;" if it is properly defined in the stylesheets. (I have encountered some themes were it is not defined) If "alignright" does not work you can add it to the main stylesheet like this...

.alignright {float:right;}

Update:

To get all the text to stay at the left and never flow under the image, you need to force it into a column like this...

<img src="http://placehold.it/350x200/" style="float:right" />
<div style="overflow:hidden">
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
</div>

Demo http://jsfiddle.net/d55psoqq/3/

skribe
  • 3,595
  • 4
  • 25
  • 36
  • Thx but as I said I don't want any of the elements (here the paragraph text) to go above or below the image. Everything must stay on the left of the image as on screenshot. – drake035 Feb 20 '15 at 14:06
  • Well nothing is going above the image, and nothing from the paragraph text will go below unless you have too much text. Like this http://jsfiddle.net/d55psoqq/2/ – skribe Feb 20 '15 at 14:13