title: Div is wrapping everything in the content and out of it
body: <p>This is weird! I'm not sure why it is doing this but the div <code>.content-wrap</code>, or <code>.main-content</code> is wrapping elements that are outside of the div....... </p>
  
  <p>Screenshot of it using firebug.
  <img src="https://i.stack.imgur.com/ngSlx.png" alt="alt text"></p>
  
  <p>But <code>.main-content</code> is isn't suppose to be wrapping the 3 columns...</p>
  
  <p>Heres the HTML of both.</p>
  
  <pre><code>&lt;div id="plans-wrap"&gt;
      &lt;section class="starter"&gt;
       &lt;img class="icon-1" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"&gt;
        &lt;h2&gt;Starter Plan&lt;/h2&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;span&gt;5GB Disk Space&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unmetered Bandwidth&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Add-on Domains&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Subdomains&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Email/FTP Accounts&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited MySQL Databases&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Shell access upon request&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;img src="images/starterplan.png" width="192" height="51" alt="Starter Plan"&gt;
      &lt;/section&gt;&lt;!-- //.starter --&gt;
  
      &lt;section class="inter"&gt;
        &lt;img class="icon-2" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"&gt;
        &lt;h2&gt;Intermediate Plan&lt;/h2&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;span&gt;10GB Disk Space&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unmetered Bandwidth&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Add-on Domains&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Subdomains&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Email/FTP Accounts&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited MySQL Databases&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Shell access upon request&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;img src="images/interplan.png" width="192" height="51" alt="Intermeidate Plan"&gt;
      &lt;/section&gt;&lt;!-- //.intermediate --&gt;
  
      &lt;section class="advance"&gt;
        &lt;img class="icon-3" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"&gt;
        &lt;h2&gt;Advance Plan&lt;/h2&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;span&gt;Unmetered Disk Space&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unmetered Bandwidth&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Add-on Domains&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Subdomains&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited Email/FTP Accounts&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Unlimited MySQL Databases&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Shell access upon request&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;img src="images/advplan.png" width="192" height="51" alt="Starter Plan"&gt;
      &lt;/section&gt;&lt;!-- //.advance --&gt;
    &lt;/div&gt;&lt;!-- //#plans-wrap --&gt;
      &lt;div class="content-wrap"&gt;
        &lt;aside class="badges"&gt;
          &lt;img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers"&gt;
        &lt;/aside&gt;&lt;!-- //.badges --&gt;
  
        &lt;div class="main-content"&gt;
          &lt;!-- All Content For Each Page Goes Here --&gt;
          &lt;!-- index/home --&gt;
  
          &lt;img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header"&gt;
          &lt;article&gt;
            &lt;h1&gt; Welcome to Elektrik Host! &lt;/h1&gt;
            &lt;p&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales nisi eu sem dapibus imperdiet.
              Etiam venenatis elit nec sapien commodo dapibus. Donec vel enim nec augue fringilla pharetra. Pellentesque
              sed augue est. Nullam et erat sed leo vestibulum consequat sit amet at ligula. 
            &lt;/p&gt;
          &lt;/article&gt;&lt;!-- //article --&gt;  
        &lt;/div&gt;&lt;!-- //.main-content --&gt;
      &lt;/div&gt;&lt;!-- //#content-wrap --&gt; 
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>/* -- PRICE PLANS -- */
  #plans-wrap { margin: 0 0 0 5px; width: 100%; }
  #plans-wrap section { background: #1b1b1b; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; float: left; margin: 19px 10px 0 0; }
  #plans-wrap section img.icon-1, #plans-wrap section img.icon-2, #plans-wrap section img.icon-3  {  float: right; }
  #plans-wrap section h2 { background: url(../images/plan-header-bg.png) repeat-x; display: block; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; font-size: 15px; padding: 18px 18px 32px 6px; width: 188px; }
  #plans-wrap section h2:before { content: "» "; }
  #plans-wrap ul { padding: 0px 23px 23px 23px ; }
  #plans-wrap ul li { color: #b60000; font-size: 12px; margin: 9px 0 0 0; }
  #plans-wrap ul li span { color: #b6b6b6; }
  
  /* -- CONTENT WRAP -- */
  #content-wrap { margin: 12px auto; width: auto; }
  #content-wrap .badges { float: right;} 
  </code></pre>
  
  <p>How can I fix this?</p>