title: Inline div acts like block when containing block input buttons
body: <p>I'm not great with CSS, but I want to create two select lists with a button panel between them to control the movement of selected items back and forth. I want it to look like this:</p>
  
  <pre><code>+----------------------+-+       +----------------------+-+
  |                      | |  ___  |                      | |
  |                      | | |_&gt;_| |                      | |
  |                      | |  ___  |                      | |
  |                      | | |_&lt;_| |                      | |
  |                      | |       |                      | |
  |______________________|_|       |______________________|_|
  </code></pre>
  
  <p>I have the following HTML:</p>
  
  <pre><code>&lt;div id='recipientSelection'&gt;
      &lt;div class='clientsBox'&gt;
          &lt;select id='allClients' size='5'&gt;
              &lt;option&gt;dfsdfs&lt;/option&gt;
              &lt;option&gt;sdfsdfds&lt;/option&gt;
              &lt;option&gt;fsdfsdfsdfsdf&lt;/option&gt;
              &lt;option&gt;dsf dsfsdfsdf&lt;/option&gt;
              &lt;option&gt;afaf&lt;/option&gt;
              &lt;option&gt;t&lt;/option&gt;
              &lt;option&gt;sdgfhgsfh&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id='clientButtons'&gt;
          &lt;input type='button' id='appendButton' value='&gt;' /&gt;
          &lt;input type='button' id='removeButton' value='&lt;' /&gt;
      &lt;/div&gt;
      &lt;div class='clientsBox'&gt;
          &lt;select id='chosenClients' size='5'&gt;
              &lt;option&gt;dfsdfs&lt;/option&gt;
              &lt;option&gt;sdfsdfds&lt;/option&gt;
              &lt;option&gt;fsdfsdfsdfsdf&lt;/option&gt;
              &lt;option&gt;dsf dsfsdfsdf&lt;/option&gt;
              &lt;option&gt;afaf&lt;/option&gt;
              &lt;option&gt;t&lt;/option&gt;
              &lt;option&gt;sdgfhgsfh&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>div#recipientSelection {
      margin-left: 50px;
      width: 90%;
  }
  
  select#allClients {
      width: 25%;
  }
  
  select#chosenClients {
      width: 25%;
  }
  
  div.clientsBox {
      display: inline;
  }
  
  div#clientButtons {
      display: inline;
      width: 15%;
  }
  
  input#appendButton {
      display: block;
  }
  
  input#removeButton {
      display: block;
  }
  </code></pre>
  
  <p>If I make the buttons block elements, their containing div starts acting like it's a block element too. I want the buttons to be block elements relative to each other, but I want the button panel to flow inline with the selects. I suspect there's something important I don't understand here. Help?</p>