• URL: http://synaptic.in/thelocalrose/test-post/

    Hello, I am trying to put these two images side by side but cant seem to accomplish it, they show one above the other.

    I’ve set the two pictures width to be that of 47% of the content frame (each) but haven’t had any luck. Aligning left or right doesn’t seem to help either.

    Any ideas?

    Thanks,
    Anne

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hello Anne. Should be an easy fix. Take a look at the following page…

    http://vivin.net/2009/11/05/displaying-images-side-by-side-in-wordpress/

    Happy WPing!

    Thread Starter anne29

    (@anne29)

    Thanks lorbach, they display next to each other but not directly side by side, one seems above and the other below, take a look.

    After a bit of digging… the alignment icons in the WordPress editor are for aligning text; they are not for aligning images. http://en.support.wordpress.com/visual-editor/#alignment 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).

    Every theme has a maximum displayed image width http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ so it’s important to keep that in mind when posting multiple images side-by-side. If you want two images to be side by side on the same line start by setting the alignment of both images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
    <br style=”clear:both;” />

    When you add a WP align class, you’re actually adding a float which will cause whatever follows it to wrap. It’s not only for text and fine to use it for images but you may get better results if you group the images in a a gallery.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Side by side images’ is closed to new replies.