Move page text to under photos

  • Unknown's avatar
    sanampej · Member ·

    I’m having trouble figuring out a simple way to move text under a photo. Simply pressing enter doesn’t do anything when I preview the page. It pertains to a couple of the pages on my site:

    http://playtoheal.wordpress.com/play-therapy-parenting-support/
    http://playtoheal.wordpress.com/individual-therapy/

    Somehow I seem to have figured it out on this page:
    http://playtoheal.wordpress.com/about-sanam/
    But I don’t know if I’ve done it correctly and I can’t figure out how to do it again.

    Thanks, in advance, for your assistance.

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

  • Unknown's avatar
    timethief · Member ·

    Why don’t my images align the way I want them to?
    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. 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.

    • 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).

    image alignment

  • Unknown's avatar
    timethief · Member ·

    I’m assuming this isn’t a CSS editing question but if it is please post and let us know that as this thread is in the CSS Forum and not the Support Forum.

  • Unknown's avatar
    sanampej · Member ·

    Thank you. I see what you are saying about align left/right.

    The look I was going for was that the quotes are to the side of the photo and the actual text comes underneath. It seems like a pretty simple concept but I can’t figure out how to make it happen.

    I was hoping there is something I can do in CSS or HTML to make it turn out this way.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    For the third (correct) picture, which is left aligned so your text wraps to the right of the image, you have this code below the text:
    <div style="clear:both;"></div>
    Better would be: 

    <br style="clear:both;"></br>

I'm not sure how you got it in there if you didn't intentionally type the code in the html editor.

For the "individual therapy" picture, you have the image code inside of the blockquote. That makes the left aligned image move a little to the right. Better for the image code to be complete before adding the quote.
To make the text continue below the image, again you will need the code in the html editor below the quote text.

    br style=”clear:both;”>/br>

    For the parenting photo aligned right the code doesn’t look bad (except you have extra paragraph tags), you only need to insert the break code below the short text (in the html editor),

    Are you copying and pasting from some other document?

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    sorry: I forgot to close the backtick…

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    code you need is:
    <br style="clear:both;"></br>

  • Unknown's avatar
    sanampej · Member ·

    Thanks so much! This was incredibly helpful.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    You are welcome.

  • The topic ‘Move page text to under photos’ is closed to new replies.