page wrapper isn't containing or wrapping at all? - html

Question

Not sure, my isn't wrapping all the way down. Now to make things easier I added borders to everything and background colors to everything. So here is my html...
Now I could add a float left to the page-wrapper div, but that is a hack and not the right way to do it. Now everything is working just the way it is even the way its setup now, but I don't like what a div isn't wrapping, its really annoying.
Here is the JSFiddle http://jsfiddle.net/ywgpB/15/
HTML
<div id="page-wrapper">
<div class="leftContainer">
<article class="welcome">
<header>
<h2>Welcome!</h2>
<img src="../images/dummy_125x125.png">
<p>Dummy Text</p>
</header>
</article>
<article class="hours">
<header>
<h2>Working Hours</h2>
<p>MON - FRI 5:00 AM to 11:00 PM
<br />SAT - SUN 7:00 AM to 8:00 PM</p>
</header>
</article>
<article class="location">
<header>
<h2>Location</h2>
</header>
</article>
</div>
<section id="main">
<div id="banner"></div>
<div class="containBox">
<article class="box">
<h2>Our Members</h2>
<p></p>
<button></button>
</article>
<article class="box">
<h2>Classes</h2>
<p></p>
<button></button>
</article>
<article class="box">
<h2>Programs</h2>
<p></p>
<button></button>
</article>
</div>
</section>
</div>
CSS
body{
background-image: url(../images/pageglare.png);
background-repeat: no-repeat;
color: #000305;
font-size: 87.5%;
font-family: Tahoma, Arial, "Lucida Sans Unicode";
line-height: 1.5;
text-align: left;
}
#page-wrapper{
margin: 0 auto;
width: 90%;
background-color: pink;
clear: both;
border: 2px solid darkorange;
}
.logoContainer{
width: 15%;
border: 2px solid blue;
margin: 2% 0;
}
.leftContainer{
border: 2px solid darkcyan;
width: 25%;
float: left;
background-color: cyan;
display: block;
}
.welcome{
width: 100%;
}
.welcome img{
float: left;
}
.hours{
float: left;
width: 100%;
}
.location{
float: left;
width: 100%;
}
#main{
width: 65%;
margin: 0 2%;
border: 2px solid green;
float: left;
background-color: lightgreen;
}
#banner{
width: 98%;
height: 300px;
border: 2px solid gray;
float: left;
}
.containBox{
margin-left: 1%;
width: 97%;
border: 2px solid black;
height: 250px;
clear: both;
background-color: gray;
float: left;
}
.box{
width: 30%;
border: 2px solid red;
height: 250px;
float: left;
}

Answer 1

Add overflow: hidden to wrapper, or element with clear: both after floating elements.
#page-wrapper {overflow: hidden}
http://jsfiddle.net/ywgpB/16/