title: How to make two div align side by side?
body: <p>I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: <a href="http://asiraj.com" rel="noreferrer">link</a></p>
  
  <p>i tried change <code>float:right;</code> on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;form method="post" action="" class="jcart"&gt;
      &lt;fieldset&gt;
        // item details here
      &lt;/fieldset&gt;
    &lt;/form&gt;
  
    &lt;div class='cartbox'&gt;
      &lt;div id="jcart"&gt;&lt;?php $jcart-&gt;display_cart();?&gt;&lt;/div&gt;
      &lt;div id='jcart-loader'&gt;&lt;img src='img/ajax-loader.gif' alt=''&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#jcart {
  position:relative;
  font-size:1.15em;
  top:0;
  margin:0 0 .75em;
  }
  
  .jcart {
  width:135px;
  margin:0 20px 20px 0;
  padding-top:20px;
  border:solid 2px #E5E5E5;
  float:left;
  background:#F0F0F0;
  text-align:center;
  }
  
  .cartbox {
  float:left;
  position:relative;
  top:0;
  width:500px;
  margin:0;
  padding:0;
  }
  </code></pre>