What you see in visual editor is not what you get in front of blog

  • Author
  • #1453848


    I am working in Mozilla Firefox.
    I have followed previous advice on how to insert image (jpeg) into blog. I put cursor at beginning of paragraph and inserted media, right justifying the photo so it appears on right and text wraps around on left. However, only the first paragraph wrapped on left side of photo, while second paragraph did not. The second para went below the photo. How can I get all the text to sit beside the photo? Thanks.
    Here is link to the blog: http://gapsontheganges.wordpress.com/2013/09/21/coconut-milk-rasam-soup/
    (I am referring to the first photo at top).
    P.s. I often have trouble with pics with text. It looks fine in the visual editor mode but when I preview it, it is different/messed up. What you see is not what you get.

    The blog I need help with is gapsontheganges.wordpress.com.



    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>



    Thanks, but what I tried didn’t work. In the code, there is the code for the image, then the first paragraph (which wraps to left of image) and then code for second paragraph (which staggers and won’t wrap to left of image). I put that code you suggested after the second paragraph (and first) on the same line and next line. But it remained the same. Thanks.



    The downside is that the code that is creating that issue is:

    h6 {
      clear: both;

    The reason I say downside is because the way floats work can be tricky. What may work on one may not work the same on another so you may end up with weird spacing.

    Now, if you want just the one image from the one post you could using CSS classes that WordPress generates for the post-id and go from there. In this case it would be:

    .postid-344 .entry-content h4 {
     clear: left;

    That will make text keep wrapping the way you want for that particular post. :) If you want to understand a little more about how it works w3schools has some good info about it here.

The topic ‘What you see in visual editor is not what you get in front of blog’ is closed to new replies.