title: Im trying to sit images next to each-other HTML and CSS using figcaption with buttons
body: <p>I want to add buttons underneath my images on my webpage, so I decided to use figcaption tag to insert buttons under each image. However, when I do this the images stack on top of each other and not side by side as they normally are.</p>
  
  <pre><code>**My HTML:**
  
      &lt;section class="mostpurch"&gt;    
    &lt;h1&gt; Latest PC downloads... &lt;/h1&gt;
      &lt;p&gt; Most purchased on PC &lt;/p&gt;
      &lt;img src="images/fallout-4.jpg" class="f41" /&gt;
      &lt;figcaption&gt;&lt;button type="button"&gt;Add to basket&lt;/button&gt;&lt;/figcaption&gt;
      &lt;img src="images/Tom-Clancys-The-Division.jpg" class="tctd1" /&gt;
      &lt;figcaption&gt;&lt;button type="button"&gt;Add to basket&lt;/button&gt;&lt;/figcaption&gt;
      &lt;img src="images/blops3.jpg" class="blops31" /&gt;
      &lt;figcaption&gt;&lt;button type="button"&gt;Add to basket&lt;/button&gt;&lt;/figcaption&gt;
      &lt;img src="images/acsyn.jpg" class="acsyn1" /&gt;
      &lt;figcaption&gt;&lt;button type="button"&gt;Add to basket&lt;/button&gt;&lt;/figcaption&gt; 
    &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p>Im not sure what I have to do in my HTML or CSS to make it possible. 
  <a href="http://i.stack.imgur.com/aAbIt.png" rel="nofollow">How it currently is (image)</a></p>
  
  <p>I want toit to sit next to each other with buttons underneath. Sorry if there is a better way of doing this I am new to this.</p>
  
  <p>Thanks in advanced</p>
  
  <p>-Jack</p>