title: How to position this div next to others?
body: <p>I have been searching around how to position this div, but everything goes wrong or nothing happens when I try, so I decided to ask here.
  Here is the css code of the divs:</p>
  
  <pre><code>    #my_content{
      margin-bottom:0;
      background-image:url("bg.jpg");
      width:50%;
      float:left;
      padding:5px;
      color: white;
      font-size:30px;
      }  
  
      #info_menu{
      margin-left:;
      color: white;
      float:left;
      width:auto;
      margin-top:;
      margin-left:1%;
      padding-right:1%
      }    
  
      #spells{
      margin-left:5%;
      background-image:url("bg.jpg");
      position:absolute;
      margin-left:;
      width:65%;
      color:white;
      border:none;
      bottom:20;
      }
  
      #summary{
      background-image:url("bg.jpg");
      border:none;
      float:right;
      position:relative;
      width:30%;
      color:white;
      margin-right:0%;
      bottom:10;
      }
  </code></pre>
  
  <p>Here is how it looks like <a href="http://s27.postimg.org/vwchchcqb/dapls.png" rel="nofollow">http://s27.postimg.org/vwchchcqb/dapls.png</a></p>