Div is wrapping everything in the content and out of it - html

Question

This is weird! I'm not sure why it is doing this but the div .content-wrap, or .main-content is wrapping elements that are outside of the div.......
Screenshot of it using firebug.
But .main-content is isn't suppose to be wrapping the 3 columns...
Heres the HTML of both.
<div id="plans-wrap">
<section class="starter">
<img class="icon-1" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Starter Plan</h2>
<ul>
<li><span>5GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->
<section class="inter">
<img class="icon-2" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Intermediate Plan</h2>
<ul>
<li><span>10GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/interplan.png" width="192" height="51" alt="Intermeidate Plan">
</section><!-- //.intermediate -->
<section class="advance">
<img class="icon-3" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Advance Plan</h2>
<ul>
<li><span>Unmetered Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/advplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.advance -->
</div><!-- //#plans-wrap -->
<div class="content-wrap">
<aside class="badges">
<img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
</aside><!-- //.badges -->
<div class="main-content">
<!-- All Content For Each Page Goes Here -->
<!-- index/home -->
<img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
<article>
<h1> Welcome to Elektrik Host! </h1>
<p>
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.
</p>
</article><!-- //article -->
</div><!-- //.main-content -->
</div><!-- //#content-wrap -->
and the CSS:
/* -- 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;}
How can I fix this?

Answer 1

You need to 'clear floats', so plans-wrap element will actually enclose three float elements inside it. Otherwise, floats are taken out of normal flow, plans-wrap has zero height and next div (main-content) overlaps with floats. This should help:
#plans-wrap {
overflow:hidden;
zoom:1;
}
More info

Answer 2

Your #plans-wrap doesn't have any specified height. Try adding overflow:auto to its CSS.

Answer 3

You can also clear floats with the clearfix method.
You need to add a class of "clearfix" to your .main-content and then the following to your CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
This method basically uses the pseudo-class to append the parent container to floated elements with a space character that will cause the parent to contain all the floated elements as well.
*NOTE: Also, be sure you have everything closed appropriately. It *