title: Distribute buttons evenly
body: <p>This maybe a fairly easy one, but I'm sucked. How can I evenly distribute horizontally  the 3 image buttons?</p>
  
  <pre><code>&lt;div id="mainwrapper"&gt;
          &lt;div id="box-1" class="box"&gt;
              &lt;img id="image-1" src="images/1.jpg"/&gt;
                  &lt;span class="caption simple-caption"&gt;
                  &lt;div class="minibuttonR"&gt;&lt;a href="index.html" onClick=""&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="minibuttonC"&gt;&lt;a href="index.html" onClick=""&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="minibuttonL"&gt;&lt;a href="index.html" onClick=""&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;/span&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#mainwrapper .minibuttonL {
      background-image: url(images/bu_spec.jpg);
      background-repeat:no-repeat;
      padding: 40px;
  }
  #mainwrapper .minibuttonC {
      background-image: url(images/bu_zoom.jpg);
      background-repeat:no-repeat;
      padding: 40px;
  }
  #mainwrapper .minibuttonR {
      background-image: url(images/bu_ok.jpg);
      background-repeat:no-repeat;
      padding: 40px;
  }
  </code></pre>