How to arrange two images next to each other with HTML widget?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I have two images online and I'd like to display them with the HTML widget. How can I make them right next to each other?

If I use a column divider, and allocate one HTML widget to the left and the other to the right, there will be a gap between the images after the page is published. (Screen shots attached.) Is there a way to get rid of the gap?
Photo of Ebruce

Ebruce

  • 29 Posts
  • 1 Reply Like
  • confused

Posted 8 years ago

  • 1
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi EBruce,

I have replied to your email to support as well with the answer. You can definitely achieve this by using HTML. Your current image code is:

<a href='http://d1.openx.org/ck.php?n=a4ae2101&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://d1.openx.org/avw.php?zoneid=150487&amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;n=a4ae2101' border='0' alt='' /></a>

All you need to do is change it slightly by adding in "style="padding:0px;margin:0px;" to the img and <a>" tags.

Here is an example:

<a href='http://d1.openx.org/ck.php?n=a4ae2101&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank' style="padding:0px;margin:0px;"><img src='http://d1.openx.org/avw.php?zoneid=150487&cb=INSERT_RANDOM_NUMBER_HERE&n=a4ae2101' border='0' alt='' style="padding:0px;margin:0px;" /></a> <a href='http://d1.openx.org/ck.php?n=a4ae2101&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank' style="padding:0px;margin:0px;"><img src='http://d1.openx.org/avw.php?zoneid=150487&cb=INSERT_RANDOM_NUMBER_HERE&n=a4ae2101' border='0' alt='' style="padding:0px;margin:0px;" /></a>

If you have any problems with this, please let me know.
Photo of Ebruce

Ebruce

  • 29 Posts
  • 1 Reply Like
Thanks a lot, Kershnee! This is exactly what I'm looking for.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Awesome!!
Photo of mml177

mml177

  • 25 Posts
  • 2 Reply Likes
HI!!
is it possible to arrange several (like 5) small images next to each other in 1 text widget? I'm using a text widget and I've got 5 images that are linked to url's (like buttons). i want to arrange them in a row, next to each other and keep them linked to their urls...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi mml177.

So you already have 5 image widgets and they are are linked to pages. You can't drag them into a text widget but you can use some HTML to do this.

First, here is the image HTML, drag over an HTML widget and paste this into it:

<a href="http://example.com"> <img src="resources/IMAGE1.jpg" style="margin-right:10px" /> </a>
<a href="http://example.com"> <img src="resources/IMAGE2.jpg" style="margin-right:10px" /> </a>
<a href="http://example.com"> <img src="resources/IMAGE3.jpg" style="margin-right:10px" /> </a>
<a href="http://example.com"> <img src="resources/IMAGE4.jpg" style="margin-right:10px" /> </a>
<a href="http://example.com"> <img src="resources/IMAGE5.jpg" style="margin-right:10px" /> </a>

Now remember to replace 'http://example.com' with the actual page or website you want the image linked to and to change 'IMAGE1.jpg' with the actual image that is in your file manager for each one. If you need any assistance with this let me know.

If you want to do this in a text widget, than just drag over a text widget and then click on it and click the last button on the text editing toolbar that says "HTML" and delete out the current code and then paste in the code above but remember to still change the stuff I said above.

If you have any problems with this, please let me know.

Hope this helps!
Nathan