Support » Fixing WordPress » positioning images side by side, not vertically

  • Hi folks.

    I want to position three Amazon affiliate image links horizontally across the page of my post, rather than one vertically under the other, as they are now. How do you do this, please?

    Cheers
    Ross

Viewing 6 replies - 1 through 6 (of 6 total)
  • I’m not sure about amazon image links but the only way i know would be to edit the vertical and horizontal spacing for the images (if you are using wordpress’s default browser uploader). If your not then just go into the html tab and add the margin left and margin right properties to the code your using like:

    <img src="filename" style="margin-left: 200px; margin-right: 200px;"/>

    This moves the image 200px to the right of the post. If it were margin-top and margin-bottom, it would move the image 200px to the bottom.

    Thread Starter RossB

    (@rossb)

    Thanks a lot, dyakub.

    A related query: is it possible to have text immediately horizontal to such an image (‘wrapped’, I suppose I mean)? At the moment, I can only begin text at the very bottom of the image, then it resumes normal left alignment on the next line down.

    I think you can use regular old HTML tables to do that. I’d tell you how but I don’t know, lol.

    Thread Starter RossB

    (@rossb)

    hahaha – well, at least you’ve let me know that it’s possible, supanamu!

    WP Voyager

    (@mindblender-3d)

    @rossb: Yes it is possible to have text “wrapped” next to an image. Although it is possible to use HTML tables to do this, it is not recommended for use under the XTML standard. WordPress outputs XHTML (unless you have your DOCTYPE altered, which is a completely different story. This would only happen if you deliberately altered your theme to use HTML 4). Anyway, the best way to do this is with a DIV element. This DIV would function as a container for the image and the text. The resulting code would look (something) like this:

    <div style="width: ##px; (whatever other style info you need)">
         (Amazon link. I am not quite sure what exactly goes here, but this is the existing stuff you've already got)
         This is your text here. This is your text here. This is your text here.
    </div>

    In this example, “##” right before the “px” is a number that defines the width of the container in pixels. You probably only need to specify the width of the container, because you want the text to wrap within a certain space horizontally.

    Make sense? If not, I can try to clarify.

    Hope this helps!

    MindBlender 3D

    Thread Starter RossB

    (@rossb)

    Thanks a lot, MindBlender 3D. Will try your code and report back (away until early next week).

    Cheers!
    Ross

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘positioning images side by side, not vertically’ is closed to new replies.