Align images next to each other - html

Question

I'm having trouble getting these two images lined up where I want them - I'm trying to do a grid style-display but for some reason (despite using display: inline) the images are appearing on separate lines.
I tried editing the width of the "figure" element (since I guessed that was what the problem was) but it just shrunk everything down instead of what I wanted - could anyone help me out?
HTML
<div id="blade" class="tab-content">
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<figcaption class="item_price">$17,000</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
<div id="simpleCart_shelfItem">
<figure>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<figcaption class="item_price">$1,682</figcaption>
<span class="item_name">Gomai Blade</span>
</figure>
</div>
</div>
CSS
.mini-img {
width: 20%;
cursor: pointer;
}
.builder {
height: 20%;
text-align: center;
padding-bottom: 10px;
width: 50%;
}
.builder fieldset {
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.builder fieldset legend {
text-align: left;
}
.tab-content {
margin-top: 10px;
}
.tab-content #simpleCart_shelfItem {
display: inline;
}
.tab-content #simpleCart_shelfItem .item_name {
display: none;
}
.tab-content #simpleCart_shelfItem figure {
width: auto;
}
I was trying to achieve a sort of "caption" effect under each separate image, but I still wanted the images lined up in a sort of "grid" format - I got the first part done (obviously) but it's the second part that's giving me trouble. I was hoping to avoid using a table, but I'm not sure if that would be more suited for this or not.
jsFiddle

Answer 1

I don't know what all that crazy code you've got is, but this is how I would do it. I understand you probably have all those classes for a reason, but could you consider simplifying, it will make your life easier, and make you a better coder.
HTML:
<div>
<img src="http://i.imgur.com/abi4hJu.png" class="mini-img" />
<p>$17 000</p>
</div>
<div>
<img src="http://i.imgur.com/IFAtrSy.png" class="mini-img" />
<p>$3500</p>
</div>
CSS:
div {
float: left;
margin: 10px;
}
p {
margin-top: 5px;
}
img {
width: 200px;
}
http://jsfiddle.net/eshellborn/g2xcr/18/

Answer 2

You are using the same ID for two DIV's which isn't valid HTML.
Can you instead of using percentages for your image tag use pixels instead. I changed the CSS to the below, adding float, and removing the other CSS.
.mini-img {
width: 100px;
cursor: pointer;
}
.tab-content {
margin-top: 10px;
}
div.simpleCart_shelfItem {
float: left;
}
JSFiddle Example:
http://jsfiddle.net/g2xcr/1/