title: Getting these elements/classes next to each other in CSS3
body: <p>I'm sure that this is gonna be pretty easy to debug but regardless I've been having issues for quite some time.
  I'm trying to get these two elements next to each other. It's a really simple idea.
  <a href="http://i.stack.imgur.com/uj89I.png" rel="nofollow">It's literally just me trying to put two boxes next to each other.</a></p>
  
  <p>And I've done this before but I guess I could really use someone to help debug my code right now.</p>
  
  <p>The way it's written...</p>
  
  <pre><code>aside.left {
      display:inline-block;
      float: left;
      background: rgba(8, 78, 7, 0.7);
      width: 200px;
      text-align: center;
    }
  
  section.right {
      display:inline-block;
      float: right;
      background-color: rgb(198, 207, 214);
  }
  </code></pre>
  
  <p>So my rationale is to try to convert these two elements into inline-blocks since they both are block types. And then I try to float one ot the right and one to the left.
  But this isn't working, and it's only making the elements stack on top of each other.</p>
  
  <p>How do I solve this probably pretty simple error?</p>