Q:

4 Column CSS Footer that is Responsive

I'm trying to create a basic 4 column CSS footer that is responsive to different screen resolutions (desktop, tablet, mobile).
The max width the footer can be is 980 pixels, if the window is larger the blue background expands to fill the window. As the window shrinks (below 980px) the columns stack on top of each other (see my diagram).
Right now the blue background is not working and the columns are not stacking when the window shrinks, instead the column's width shrinks.

Fiddle: http://jsfiddle.net/Gar3H/
HTML
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

CSS
#wrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
} 

#footer {
    background-color: blue;
    width: 100%;
} 

.footerFloat {
    width: 25%;
    float: left;
}

A:

Here is a working version
http://jsfiddle.net/Gar3H/2/
CSS:
    #footer {

        width: 100%;
        margin: auto;
    }
    .footerFloat {
    width: 100%;
    }
@media all and (min-width: 950px) {
    #footer {

        width: 980px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
    }
}

#wrapper {
    background-color: blue;
    width: 100%;
    overflow:hidden;
} 

it uses media queries and how browsers prioritize css rules

