Need help? Check out our Support site, then


Aligning separate images on one line

  1. I cannot align three images on the Designs page, though I did select the right, center and left alignment.
    I do not want to use Gallery option because each image needs its own outside URL link.
    Are they too big to fit into the page? I am using Piclrow without the side bar, but the images are still confined to the center of the screen.
    What am I doing wrong?
    Thank you. Oh, I don't speak css, not a word (too old for that).

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

  2. The maximum displayed image width for Pilcrow is found here:
    http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/
    The images must be presized prior to uploading so they do fit into a single line within the width allowing some spacing between them. As you the images to be side by side on the same line start by setting the alignment to left. http://en.support.wordpress.com/images/image-alignment/#side-by-side

    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>

  3. Thank you for explaining everything on a kindergarten level. That's exactly what I needed. Off to implement.

  4. You're welcome and best wishes. :)

Topic Closed

This topic has been closed to new replies.

About this Topic