How to add three images inline

I have tried, I get two images in line and the third goes below.

there might simply not be enough space for three images.

what code have you used?

i would use ‘alignleft’ on the images, and a right margin on the first two images;

if you edit the images within the post, and goto ‘advanced setting’ you should be able to add individual styles to each image.

I used this which I found, but made images overlap

<div style=”width:45%; float: left; padding-right: 5%; display: inline;”><img src=”file:///Mac osx/Users/vchapple/Desktop/web site images/lifestyle/for web/0.jpg”></div>

<div style=”width:45%; float: left; padding-right: 0%; display: inline;”><img src=”file:///Mac osx/Users/vchapple/Desktop/web site images/lifestyle/for web/0.jpg”></div>

<div style=”width:45%; float: left; padding-right: 0%; display: inline;”><img src=”file:///Mac osx/Users/vchapple/Desktop/web site images/lifestyle/for web/0.jpg”></div>

<div style=”clear: both;”></div>

but made images overlap

are the images sizes (width) adapted to the available space?

also, try to change this style="width:45%; to style="width:30%;

To be honest I have no idea how to do it. I have tried different code to no avail

I tried that, images overlap with no space between. It’s the closest code that I could find.

Sizing may have caused more issues; here is the code with each image as 300; two are in line, the third drops below.

<div style=”width:45%; float: left; padding-right: 5%; display: inline;”><img src=”https://motionweb.co.uk/wp-content/uploads/2011/03/7.jpg”></div&gt;

<div style=”width:45%; float: left; padding-right: 0%; display: inline;”><img src=”https://motionweb.co.uk/wp-content/uploads/2011/03/3.jpg”></div&gt;

<div style=”width:45%; float: left; padding-right: 0%; display: inline;”><img src=”https://motionweb.co.uk/wp-content/uploads/2011/03/0.jpg”></div&gt;

<div style=”clear: both;”></div>

Just a test page: https://motionweb.co.uk/?page_id=5

you didn’t change the width:45%; in the inline styles to width: 30%;:

this seems to work:

<div style="width: 30%; float: left; padding-right: 4%; display: inline;"><img src="https://motionweb.co.uk/wp-content/uploads/2011/03/7.jpg"></div>
<div style="width: 30%; float: left; padding-right: 4%; display: inline;"><img src="https://motionweb.co.uk/wp-content/uploads/2011/03/3.jpg"></div>
<div style="width: 30%; float: left; padding-right: 0%; display: inline;"><img src="https://motionweb.co.uk/wp-content/uploads/2011/03/0.jpg"></div>
<div style="clear: both;"></div>

Thank you that worked great… Do you know how I could add a link to each of these?

Thanks again

general html structure of a linked image:

<a href="https://link_url"><img src="https://motionweb.co.uk/wp-content/uploads/2011/03/0.jpg" alt="" /></a>

https://www.w3schools.com/html/html_links.asp
https://www.w3schools.com/tags/tag_IMG.asp

Many thanks