page wrapper isn't containing or wrapping at all?

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/