title: Aligning buttons side by side?
body: <p>I have the following page:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class=main&gt;
      &lt;div class=bttn&gt;
          &lt;button&gt;abcdef&lt;/div&gt;
      &lt;div class=content&gt;
          &lt;a href=#!&gt;jksg&lt;/a&gt;
          &lt;a href=#!&gt;jksg&lt;/a&gt;
          &lt;a href=#!&gt;jksg&lt;/a&gt;
          &lt;a href=#!&gt;jksg&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button&gt;abcdef
      &lt;button&gt;abcdef
          &lt;button&gt;abcdef
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>button {
      border: 3px solid red;
      border-collapse: collapse;
      padding: 16px;
      background-color: blue;
      width: 25%;
      margin: 0px -1px 0px -1px display: inline;
  }
  
  .content {
      display: none;
  }
  
  .bttn + .content {
      display: none;
  }
  
  .bttn:hover + .content {
      display: block;
  }
  </code></pre>
  
  <p>when you run the code, the first button appears alone on the line while the rest of them arrange themselves on the next line side by side. i guess the same will happen if i insert the hidden div's on the other buttons. Any ways to change that?? I changed the display of button (the tag), bttn (the class) and content(the class) all to inline but still the problem persists. I think the problem may be of the position property but i am not sure. If thats the case pls also tell me whats going wrong here.   </p>