4响应的列CSS页脚

Question

我正在尝试创建一个基本的4列CSS页脚,它响应不同的屏幕分辨率(桌面,平板电脑,移动设备).

页脚的最大宽度为980像素,如果窗口较大,则蓝色背景会扩展以填充窗口.当窗口缩小(低于980px)时,列堆叠在一起(参见我的图表).

现在蓝色背景不起作用,当窗口缩小时,列不会堆叠,而是列的宽度缩小.

小提琴: 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;
}

Answer 1

这是一个工作版本

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;
} 

它使用媒体查询以及浏览器如何优先考虑css规则