Alignment of Images in News Article Area

If any one is online this weekend, A novice needs some help with Alignment of images

I am trying to insert images w/ PS4 galleries, and I cant seem to get the second image to clear the first. I have tried using the PS4 option of inserting a page break but the image still wont clear or align to the left after the page break. )(see attached image showing second image not clearing first)

Here is the code:

<p><img width="207" height="207" align="left" alt="" src="/imagesupload/cms_files/default-product_thumb.png" style="margin-right: 10px;"></p><p><img alt="" src="http://luxehats.com/galleries/tiny_ribbon_lightbox/admin/light_large.png" name="powergallery" id="61" theme="light" design="tiny_ribbon_lightbox" style="display: block;"></p>

<div style="page-break-after: always;"><span style="display: none;">&#160;</span></div>

<p><img width="207" height="207" align="left" alt="" src="/imagesupload/cms_files/default-product_thumb.png" style="margin-right: 10px;"></p><p><img alt="" src="http://luxehats.com/galleries/tiny_ribbon_lightbox/admin/light_large.png" name="powergallery" id="61" theme="light" design="tiny_ribbon_lightbox" style="display: block;"></p>


I know this is prob an easy fix but Im stuck.

Thanks, KM

Good Morning WA Team,

Could you please assist with some guidance.

Your help is always very much appreciated.

KM

please post a link where i can see the problem to investigate a fix.

Thanks Jason, I always appreciate your time and assistance.

Link is page.php?News=2

You need to create a div for each image/ gallery line:

<div>
1st image and gallery code in here
</div>
<div>
2nd image and gallery in here
</div>


you may also want to add an overflow:hidden property to each container div:
<div style="overflow:hidden;">

Thanks Jason, I will give it a try.

Hello Friend,

I tried this, but got same results:

<div> <img width="207" height="207" align="left" alt="" src="/imagesupload/cms_files/default-product_thumb.png" style="margin-right: 10px;"><img alt="" src="http://luxehats.com/galleries/tiny_ribbon_lightbox/admin/light_large.png" name="powergallery" id="61" theme="light" design="tiny_ribbon_lightbox" style="display: block;"> </div>

<div style="page-break-after: always;"><span style="display: none;">&#160;</span></div>

<div> <img width="207" height="207" align="left" alt="" src="/imagesupload/cms_files/default-product_thumb.png" style="margin-right: 10px;"> <img alt="" src="http://luxehats.com/galleries/tiny_ribbon_lightbox/admin/light_large.png" name="powergallery" id="61" theme="light" design="tiny_ribbon_lightbox" style="display: block;"> </div>

try overflow:hidden in each of the divs like suggeste previously:

<div style="overflow:hidden;"> <img width="207" height="207" align="left" alt="" src="/imagesupload/cms_files/default-product_thumb.png" style="margin-right: 10px;"><img alt="" src="http://luxehats.com/galleries/tiny_ribbon_lightbox/admin/light_large.png" name="powergallery" id="61" theme="light" design="tiny_ribbon_lightbox" style="display: block;"> </div>

<div style="page-break-after: always;"><span style="display: none;"> </span></div>

<div style="overflow:hidden;"> <img width="207" height="207" align="left" alt="" src="/imagesupload/cms_files/default-product_thumb.png" style="margin-right: 10px;"> <img alt="" src="http://luxehats.com/galleries/tiny_ribbon_lightbox/admin/light_large.png" name="powergallery" id="61" theme="light" design="tiny_ribbon_lightbox" style="display: block;"> </div>

Beautiful Piece of Work... Thank You !!!

I'm not in a big hurry but would there be a way to center the galleries next to the images, easily ?

in the \tiny_ribbon_lightbox/css/common.css file add margin-top: 50px; to the .pg-rlp style


.pg-rlp {
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
margin-top:50px;
}