HTML: Placing Images or Buttons Side by Side

Pin It

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 area such as the one on my sidebar. 

<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

<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>

  

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!