I am currently working on developing a simple 4 column CSS footer that adapts to various screen resolutions such as desktop, tablet, and mobile devices.
The footer should have a maximum width of 980 pixels, with the blue background expanding to fill the window if it exceeds this width. When the window size decreases below 980px, the columns should stack on top of one another according to my diagram.
Unfortunately, I am facing issues with the blue background not displaying correctly and the columns failing to stack up when the window is resized smaller; instead, their width decreases.
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;
}