How to arrange three images side by side?

  • Unknown's avatar
    arianadourre · Member ·

    Hi,
    First of all I’m new to WordPress.
    I want to align three photos in my next post, side by side. But I cannot seem to make it work with the ‘place center/right/left” options. I have googled a bit but alot of answers are on editing he URL.
    I have no clue about that, so if someone could simplify it and teach me how to get it done, would be a big help. :)

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

  • Unknown's avatar
    panaghiotisadam · Member ·

    Align none means place left, no wrap around. Align center means place center, no wrap around. Align left or right means place left or right plus wrap around, that is, make the rest of the content start next to instead of below the image. In your case the rest of the content is the next image, so, contrary to the impression the names give, for three images side by side you must set the alignment of all three images to left.

    Once you have inserted the images, you must switch the editor to HTML and paste this after the three image codes, to stop the wrap-around effect:
    <br style="clear:both;" />

  • Unknown's avatar
    arianadourre · Member ·

    It worked! :) But only two images though, the third one was probably too big to be placed next to the second one.
    However I only used the Align left tool that usually comes when you upload and insert a photo into the post. What does this do? <br style=”clear:both;” /> and what’s the wrap around effect? Thank you.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    I only see one picture on the blog linked to your name. Perhaps you are talking about another blog, or you are talking about a draft post.

    At any rate, your picture is aligned right and the text wraps around it on the left side. If you wanted to add more text below the picture, without the text wrap, then you would use this in the html editor:
    <br style="clear:both;" />
    That will force the text wrapping on the left to stop, (that is the wrap around effect) allowing you to start a new paragraph spanning the whole width of your post column.

    If your three pictures are too wide for your theme, and only two will fit, the third one will appear below the others.

    But if your three images are too small to fill the width of your post column, you will find that your text will wrap around the right side of the third image. To prevent that you use the clear:both code (in the html editor) so that text will start below the pictures.

  • The topic ‘How to arrange three images side by side?’ is closed to new replies.