Blog Improvement Center: Placing Images Side by Side




Welcome to the Blog Improvement Center. Every Wednesday you will get a tip, hack, or writing advice to improve your blog. Be on the lookout for DIY projects that will have you blogging like a pro! Don't miss a post, subscribe today!


Placing Images Side by Side


(Today's post is a reprint of a tutorial I did almost a year ago.  I am reposting since it is one of my most viewed tutorials and I continue to get requests on how to do this.)

Sometimes images misbehave and fuss about sitting next to each other. If you desire to make your buttons or images nicely sit side by side without conflict then here are two ways to manage them using HTML.  You can apply this to make a side by side sponsor section such as the one on my sidebar. 

GLAboutMeBedtimeBookCover

GLNarrationRotation

<table>
<tr>
<td><replace with your image URL or button code></td>
<td><replace with your image URL or button code></td>
</tr>
</table>
End Result and Actual Code



GLAboutMeBedtimeBookCover GLNarrationRotation


<center><table>
<tr>
<td><a href="http://www.flickr.com/photos/goldenapples/6259169149/" title="GLAboutMeBedtimeBookCover by thefruitofherhands, on Flickr"><img src="http://farm7.staticflickr.com/6045/6259169149_f626f4ca01_m.jpg" width="180" height="240" alt="GLAboutMeBedtimeBookCover"></a></td>
<td><a href="http://www.flickr.com/photos/goldenapples/6259696194/" title="GLNarrationRotation by thefruitofherhands, on Flickr"><img src="http://farm7.staticflickr.com/6115/6259696194_73aac95e75_m.jpg" width="180" height="240" alt="GLNarrationRotation"></a></td>
</tr>
</table></center>

Simply replace your button codes with the red code above. You can repeat the code to make two more images beneath to make a grid effect.    

And Another Way

You will to get the button codes from your image hosting site. Below are examples of the button codes you will start off with.

<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>

<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>

<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>

<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>

Now add <center> to the first button code and then </center> at the end of the second.  If you want a space then add &nbsp; in between the buttons.  Then do the same thing for the next set.

Code will then look like this:

<center><a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>&nbsp;<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a></center><center><a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>&nbsp;<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a></center>




goldentree goldentree
goldentree goldentree


Note:  Make sure there are no spaces in your code so the pictures like up correctly.

If you have any questions please let me know!




My Photo
Like My Page Follow Me About Me Moms of Dyslexics
Richele McFarlin, author of Under the Golden Apple Tree, and founder of Moms of Dyslexics, enjoys a good cup of coffee as she demonstrates her ability to wrestle HTML to the ground and write from the heart.

3 comments:

Rosann Cunningham said...

I think I just went a little bit cross eyed reading all this code stuff. Lol! But thank you for sharing it here. I've been wanting to understand how to do images side by side since I started blogging. :)

Jills Home Remedies said...

You are giving me a gold mine of information, Rachele! Thank you!!! As soon as I get the time, I am implementing these tips!

Sean Rasmussen said...

Loving the blog improvement center. This can be set as a reference for those bloggers who just started their niche and who are very particular on how their blog looks. Keep it up! More bloggers will pass by here and will thank you for this.

Regards,
Sean Rasmussen