I have successfully incorporated multiple images side by side on my blog
Following is the code used for this layout:
<div class="images">
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/>
<figcaption>Itty</figcaption>
</figure>
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/>
<figcaption>Bitty</figcaption>
</figure>
<figure>
<img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;"/>
<figcaption>Kitty</figcaption>
</figure>
<figure>
<img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;" />
<figcaption>Commiteh</figcaption>
</figure>
To apply the styling, here is the CSS code. I included both HTML and CSS in the same widget by selecting the html/javascript external widget option in blogger and added it below the menu bar and pages. However, I am facing difficulty in adjusting the space between the menu bar and this widget. The original template can be viewed on this site
figure {
display: inline-block;
margin: 30px 1em 1em 0;
}
figcaption {
font-family: 'Comic Sans MS';
text-align: center;
font-size: 12pt;
}