Having a bit of trouble with my div element not wrapping all the way down. To simplify things, I've applied borders and background colors to everything. Here's the HTML code...
I could resort to adding a float left to the page-wrapper div as a workaround, but that's not the ideal solution. Everything seems to be functioning properly as it is now, but the issue with the div not wrapping is quite bothersome.
Check out 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;
}