我网站上的每个页面都使用相同的页脚代码。为什么页脚实际上只在两个页面上显示为 100% 宽度?
我尝试了许多不同的修复方法,但似乎没有任何效果。
HTML:
<div id="footer-outer">
<footer class="wrapper">
<div class="ftr-nav-area">
<div class="l-f-nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">branding</a></li>
</ul>
</div>
<div class="r-f-nav">
<ul>
<li><a href="#">staffing solutions</a></li>
<li><a href="#">services</a></li>
<li><a href="#">social media consulting</a></li>
</ul>
</div>
</div>
<div class="socal-section">
<div class="s-text">
<h4>Contact Us</h4>
<p>In a est nisl. Vestibulum condimentum, neque id faucibus.</p>
</div>
<div class="s-icon">
<a href="#"><img src="images/twiter-icon.png" alt="" /></a>
<a href="#"><img src="images/fb-icon.png" alt="" /></a>
<a href="#"><img src="images/g-icon.png" alt="" /></a>
</div>
</div>
<div class="footer-logo-section">
<a href="index.html"><img src="images/footer-logo.png" alt="" /></a>
<p class="t-gap-10">© Copyright. 2013. All Rights Reserved.</p>
</div>
</footer>
CSS:
#outer{
width: 1000px;
overflow: hidden;
margin: 0px auto;
clear: both;}
#footer-outer{
width: 100%;
overflow: hidden;
border-top: 1px solid #31679c;
background: url(../images/footer-bg.jpg) repeat-x top #0066b3;
color: #8eddff;
float: left;}
.wrapper{
width: 1000px;
margin: 0px auto;
clear: both;
padding: 22px 0px 16px;
overflow: hidden;}
.l-f-nav{ width:123px; float:left;}
.r-f-nav{ width:180px; float:left;}
.ftr-nav-area ul{ list-style:none;}
.ftr-nav-area ul li{ padding:0px 0px 12px 22px; background:url(../images/footer- icon.png) no-repeat 4px 6px;}
.ftr-nav-area ul li a{ color:#fff; text-decoration:none;}
.ftr-nav-area ul li a:hover{ color:#7bcdf5;}
任何帮助表示赞赏。