Image placement: 2 images in one row, space between, right-justified

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I've been trying unsuccessfully for the past hour to add two thumbnails to a page, in a single row with a few spaces in between them, the whole thing right-justified so that I can add text on the left. I've been able to do each of those individually, but I can't get all of them at once. For example, I was able to put both thumbnails next to each other, right-justified. However, when I try to add a few spaces in between the thumbnails, one of them always disappears. Please help.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
  • thinking this shouldn't be hard. But it is.

Posted 8 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Keara,

I'm sorry you are having trouble setting your page up as you would like. I want to make sure I am understanding what it is you are wanting to do. What it sounds like is that you want to have two images in the same row, and then to the left of each image, some text. If that is not correct please let me know.

A really great way to arrange your page and put various widgets next to each other is to use the Column Divider widget. I am going to attach a screen shot of a test page I set up which uses:

1. First, a Column Divider widget
2. Next, a Column Divider widget into each side of the first widget
3. Next, a Text widget and an Image widget put into the columns of each Column Divider widget.



With the Column Divider widget, you can drag the center bar to the right or left to make one side smaller or bigger.

Can you let me know if this doesn't help with what you are doing.

Kind Regards,
Emmy
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Emmy, thank you for your reply. What I'm actually trying to do is this --
[left margin] Text text text text - Picture 1 [spaces] Picture 2 [right margin]

So: text, then photo, then photo (but with spaces in between the two photos); and with text on the left, wrapping around the photos, which are in a row on the right.

Your suggestion and demonstration as to the column-divider are helpful and suggest additional questions, but it might be good to focus just one my first question and then perhaps try another?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Ok, I did some playing around with a feature we have which wraps text around images. This works well, but just with a single image, I am having a hard getting two images in and then wrapping the text around the two images.



What I would suggest, if you want to have two images and use this text wrapping feature, is that you use some type of image editing software to create a single image, which has the two positioned as you would like on a white background.

Here is a link to a tutorial with more information on how to use the text wrapping feature: Yola - Wrapping text around images.

I hope this will help!

Emmy
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Emmy, the idea of using image editing software is a terrific one. I'm generally familiar with HTML but am still a babe-in-the-woods when it comes to images, and I just never thought of that. Thank you for trying out the text-wrapping re the two images. It does seem that there ought to be some way to do it using straight HTML. But apparently it can't be done with the widgets alone.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
While we're talking, I do have another question about images and image-placement. I'm doing a number of pages, each with 6-8 thumbnails. I want to put the text describing the thumbnail on the left side of the page, with each thumbnail, across from its text, on the right side. I was wondering if a table for each page might be the best way to control layout and placement. How does that seem to you -- or is there something else that you would recommend?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Ahhh, well I would say that the Column Divider widget is the easiest way to go for this. I must say that this widget is my favorite because you can do so much with it when it comes to arranging a page. You can so easily add a Text widget to one side, and an Image widget to the other. And you can add as many as you would like to a page, so if you want 6 pictures with corresponding text to the left, you can add 6 Column Divider widgets to accomplish this.

What you are wanting to do could also be done with an HTML table, but the Column Divider widget also does this without having to write the code and size the various table cells.
Photo of Keara

Keara

  • 325 Posts
  • 14 Reply Likes
Sounds like I should give that a try. I'm a little reluctant because I just haven't had much luck in terms of image placement with anything I've tried thus far. Widgets simplify things, but they do that by removing things from one's control. But then sometimes one wants a little control, and then . . .
Photo of adi_tau8605

adi_tau8605

  • 1 Post
  • 0 Reply Likes
was here...really appreciate it...so helpful, thanks :) love...
Photo of SilverX

SilverX

  • 492 Posts
  • 40 Reply Likes
For the HTML stuff:

< img src="/logo.jpg" align="right" alt="my logo >

did you try something like above ?