Responsive Divs are overlapping - html

Question

I have a code at http://jsfiddle.net/N7nj5/
CSS:
/* ================================================================ Pre-footer Advert pfa =========================================================== */
#pre-footer-ad-container {
width: 95%;
height: 100px;
margin-left: 2.5%;
margin-right: 2.5%;
}
.pre-footer-ad {
width: 100%;
height: 100px;
}
/* SECTIONS */
.sectionpfa {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colpfa {
height: 100px;
display: block;
float:left;
margin: 1% 0 1% 1%;
background-color: #f00;
}
.colpfa:first-child { margin-left: 0; }
/* GROUPING */
.grouppfa:before,
.grouppfa:after {
content:"";
display:table;
}
.grouppfa:after {
clear:both;
}
.grouppfa {
zoom:1; /* For IE 6/7 */
}
/* GRID OF TWO */
.pfaspan_2_of_2 {
width: 100%;
}
.pfaspan_1_of_2 {
width: 49.5%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.colpfa {
margin: 1% 0 1% 0%;
}
}
#media only screen and (max-width: 480px) {
.pfaspan_2_of_2 {
width: 100%;
}
.pfaspan_1_of_2 {
width: 100%;
}
}
/* ================================================================ Footer Content ================================================================ */
#footer-container {
margin-top: 40px;
width: 100%;
height: auto;
background-color:#16a085;
color: #ffffff;
}
.footer {
width: 95%;
height: 300px;
margin-left:2.5%;
margin-right: 2.5%;
background-color:#16a085;
}
/* SECTIONS */
.sectionfooter {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colfooter {
display: block;
float:left;
margin: 1% 0 1% 2%;
}
.colfooter:first-child { margin-left: 0; }
/* GROUPING */
.groupfooter:before,
.groupfooter:after {
content:"";
display:table;
}
.groupfooter:after {
clear:both;
}
.groupfooter {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.footerspan_3_of_3 {
width: 23%;
}
.footerspan_2_of_3 {
width: 24%;
}
.footerspan_1_of_3 {
width: 49%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.colfooter {
margin: 1% 0 1% 0%;
}
}
#media only screen and (max-width: 480px) {
.footerspan_3_of_3 {
width: 100%;
}
.footerspan_2_of_3 {
width: 100%;
}
.footerspan_1_of_3 {
width: 100%;
}
}
HTML:
<!-- Pre-Footer Advertisement pfa -->
<div id="pre-footer-ad-container">
<div class="pre-footer-ad">
<div class="sectionpfa grouppfa">
<div class="colpfa pfaspan_1_of_2">
This is column 1
</div>
<div class="colpfa pfaspan_1_of_2">
This is column 2
</div>
</div>
</div>
</div>
<!-- Footer Content -->
<div id="footer-container">
<div class="footer">
<div class="sectionfooter groupfooter">
<div class="colfooter footerspan_1_of_3">
Testimonials
</div>
<div class="colfooter footerspan_2_of_3">
Legal
</div>
<div class="colfooter footerspan_3_of_3">
Other Links
</div>
</div>
</div>
</div>
Problem Definition:
There are two parts:
1. the columns in red color
2. the column in torquise color
They are responsive.
When I reduce the width of the screen, the red ones overlap the torquise one.
I DONT WANT THAT TO HAPPEN!!!
I want that when the site is displayed on a mobile screen, the red and torquise regions should not overlap.
Currently when i reduce the screen resolution, the red ones come one below the other, which is perfect. but the same should happen with the torquise one also.
Please Help!!!

Answer 1

Just clear the footer-container
#footer-container {
margin-top: 40px;
width: 100%;
height: auto;
background-color:#16a085;
color: #ffffff;
clear: both; /* <--- */
}
FIDDLE

Answer 2

Use min-height for test instead height, or reset height too via your queries.
Tes with min-height: http://jsfiddle.net/N7nj5/1/