title: How to place <span> elements side by side?
body: <p>I have a small problem with these <code>&lt;span&gt;</code> elements in a <code>&lt;div&gt;</code>. </p>
  
  <p><a href="http://jsfiddle.net/kkzLW/179/">http://jsfiddle.net/kkzLW/179/</a></p>
  
  <p>Here is the section of CSS code that I'm working with:</p>
  
  <pre class="lang-css prettyprint-override"><code>.rightRapper {
    border-style: dotted;
    margin-left: 105px;
    margin-top: 0px;
    height: 90px;
    width: 100px;
    display: block;
  }
  
  .leftRapper {
    border-style: dotted;
    margin-left: 0px;
    height: 90px;
    width: 100px;
    display: block;
  }
  </code></pre>
  
  <p>Here is the HTML section:</p>
  
  <pre><code>&lt;div id="battleBox"&gt;
    &lt;span class="leftRapper"&gt;
      &lt;span id="buttonColumn"&gt;         
        &lt;span id="container3" class="topButton"&gt;
          &lt;a href="" id="linktomouseover"&gt;+&lt;/a&gt;   
        &lt;/span&gt;
        &lt;span id="container4" class="bottomButton"&gt;
          &lt;a href="" id="linktomouseover2"&gt;-&lt;/a&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="rightRapper"&gt;
      &lt;span id="buttonColumn"&gt;         
        &lt;span id="container" class="topButton"&gt;
          &lt;a href="" id="linktomouseover3"&gt;+&lt;/a&gt;   
        &lt;/span&gt;
        &lt;span id="container2" class="bottomButton"&gt;
          &lt;a href="" id="linktomouseover4"&gt;-&lt;/a&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to get the <code>&lt;span&gt;</code> <code>.leftRapper</code> and <code>.rightRapper</code> to be side by side in the <code>&lt;div&gt;</code> <code>battleBox</code>. However, when I set the CSS <code>display</code> property to <code>inline</code>, the <code>&lt;span&gt;s</code> get squished into a smaller shape for some reason. When I set the <code>display</code> to <code>block</code>, it turns them into the size I want but it doesn't display them the way I want, because they're not displayed inline.</p>
  
  <p>What is causing the <code>&lt;span&gt;s</code> to have a smaller size?</p>