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=”http://motionweb.co.uk/wp-content/uploads/2011/03/7.jpg”></div>
<div style=”width:45%; float: left; padding-right: 0%; display: inline;”><img src=”http://motionweb.co.uk/wp-content/uploads/2011/03/3.jpg”></div>
<div style=”width:45%; float: left; padding-right: 0%; display: inline;”><img src=”http://motionweb.co.uk/wp-content/uploads/2011/03/0.jpg”></div>
<div style=”clear: both;”></div>
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="http://motionweb.co.uk/wp-content/uploads/2011/03/7.jpg"></div>
<div style="width: 30%; float: left; padding-right: 4%; display: inline;"><img src="http://motionweb.co.uk/wp-content/uploads/2011/03/3.jpg"></div>
<div style="width: 30%; float: left; padding-right: 0%; display: inline;"><img src="http://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="http://link_url"><img src="http://motionweb.co.uk/wp-content/uploads/2011/03/0.jpg" alt="" /></a>
http://www.w3schools.com/html/html_links.asp
http://www.w3schools.com/tags/tag_IMG.asp
