Text wrap around image

• 

  cathiedevitt · Member · Sep 30, 2014 at 5:29 pm

  • Copy link
  • Add topic to favorites

  I seem to have this as a hit or miss.

  The page http://cathiedevitt.wordpress.com/workshops/?preview=true&preview_id=853&preview_nonce=717ff5cdbf

  Shows image on the right with text that I want wrapped around. At the moment there is a big white space.
  I have fiddled about trying to move the text and re-siting the image to left, centre and none, but still can’t tidy it up.
  All help appreciated

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Sep 30, 2014 at 5:34 pm

  • Copy link

  We Volunteers cannot view previews. Make sure you are running a browser version found at http://browsehappy.comand that you have third party cookies enabled on your browser please http://en.support.wordpress.com/third-party-cookies/#how-do-i-enable-third-party-cookies

  See here please > http://en.support.wordpress.com/visual-editor/#alignment

  The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.

  Align-left means position left, with the rest of the content wrapping around the right side of the image.

  Align-right means position right, with the rest of the content wrapping around the left side of the image.

  Align-center means position center, with no wrap-around (= the rest of the content below the image).

  If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

  To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
  <div style="clear:both;"></div>

• 

  cathiedevitt · Member · Sep 30, 2014 at 5:44 pm

  • Copy link

  Thank you.
  I have tried pasting <div style=”clear:both;”></div> as you suggested, at various points-
  after image
  after paras
  but it is still showing white space?
  It looks okay on the system but not on the live site?

• 

  timethief · Member · Sep 30, 2014 at 6:34 pm

  • Copy link

  As I cannot view what you are doing I’ll tag this thread for a Staff follow-up. Please subscribe to the thread so you are notified when they respond and please be patient while waiting.

• 

  shawnajroberts · Member · Oct 6, 2014 at 11:24 pm

  • Copy link

  Hi there!

  I took a look at your draft. If you’ll switch to the Text editor you’ll see that your image’s code is inside of the Header 3 tags for the title “What is Laughter Yoga?”. Here’s what I see:

  <h3>What is Laughter Yoga?<a href="http://cathiedevitt.files.wordpress.com/2014/09/workshop-logo.jpg"><img class="alignright size-medium wp-image-854" src="http://cathiedevitt.files.wordpress.com/2014/09/workshop-logo.jpg?w=300" alt="workshop logo" width="300" height="250" /></a></h3>

  To fix this, you’ll want to move the ‘/h3’ tag after the question mark of your title, before the ‘a’ tag. (I’m not using < and > here so that they don’t get read as HTML by the forums, but each tag starts with a less than sign and ends with a greater than sign, so make sure you move those as well. :)

  Let me know if I can help further!