請使用我的頁腳幫助我

Question

我正在使用Dreamweaver編輯我爲新業務網站獲得的模板。我遇到了頁腳問題，我不確定它是HTML問題，CSS問題還是我只是一個白癡問題。不管我做了什麼，頁腳延伸得太遠了。下面是我在談論的一個截圖：

http://tinypic.com/r/t9ccbn/4

另外，我想的聯繫與它上面列如聯繫人信息和版權信息做排隊。下面是HTML：

<div id="footer"> 
    <div> 
     <div id="links"> 
     <div class="showroom">    
       <p><br> 
       9501 W. Sahara Ave. #2082 
       <br> Las Vegas, NV 89117 
       <br> 702-409-5373<br> 
        <a href="index.html">info@briarpatchfurniture.com</a> 
      </p> 
      </div> 


     <ul class="navigation"> 
      <li><a href="index.html">Home</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="gallery.html"> Gallery</a></li> 
<li><a href="contact.html">Contact</a></li> 

 <p id="footnote"> 
      © Copyright TIBISI, Inc 2013. All Rights Reserved. 
     </p> 
    </div> 
</div> 

這裏是CSS：

/*------------------------------ FOOTER ------------------------------*/ 
#footer { 
background-color: #e2b241; 
border-top: 1px solid #fff; 
padding: 28px 0 14px; 
} 
#footer p { 
color: #4b3a33; 
font-size: 12px; 
line-height: 18px; 
margin: 0; 
} 
#footer > div { 
width: 940px; 
margin: 0 auto; 
padding: 0 10px; 
} 
#footer .posts { 
float: left; 
height: 300px; 
width: 302px; 
padding: 0; 
} 
#footer .posts li { 
width: 276px; 
margin: 0 0 30px; 
padding-left: 10px; 
} 
#footer .posts p a { 
line-height: 24px; 
margin: -3px 0 3px; 
} 
#links { 
background: url(../images/separator-dark.png) repeat-x left bottom; 
color: #4b3a33; 
display: inline-block; 
width: 940px; 
padding: 0 0 20px; 
} 
#links h4 { 
color: #241b18; 
font-family: "Oswald"; 
font-size: 15px; 
font-weight: normal; 
line-height: 24px; 
margin: 0 0 12px; 
padding-left: 10px; 
text-transform: uppercase; 
} 
#links > div { 
float: left; 
background: url(../images/separator-dark-vertical.png) repeat-y left top; 
height: 300px; 
padding-left: 20px; 
} 
#links .showroom { 
background: none; 
width: 293px; 
padding-left: 0; 
padding-right: 15px; 
} 
#links .showroom h4 { 
padding-left: 0; 
} 
#links .showroom img { 
margin-bottom: 12px; 
} 
#links .showroom p { 
font-size: 13px; 
margin: 0; 
} 
#links .showroom p em { 
color: #fff; 
display: block; 
font-style: normal; 
margin: 0 0 20px; 
} 
#links .showroom p a { 
color: #4b3a33; 
display: block; 
} 
#links .showroom p a:hover { 
color: #241b18; 
} 
#newsletter { 
background: url(../images/separator-dark.png) repeat-x left bottom; 
width: 284px; 
margin: 0 0 16px 6px; 
padding: 0 0 20px; 
} 
#newsletter h4 { 
padding-left: 0; 
} 
#newsletter input { 
color: #4b3a33; 
height: 26px; 
line-height: 26px; 
width: 269px; 
border: 3px solid #af8112; 
margin: 0 0 6px; 
padding: 0 4px; 
*margin-left: -6px; /** Needed for IE7 **/ 
} 
#newsletter input.btn2 { 
color: #fff; 
width: 83px; 
border: 0; 
padding: 0px 0 2px; 
} 
#connect a { 
display: inline-block; 
height: 33px; 
margin: 0 10px; 
} 
#connect a.facebook { 
background-position: -46px -112px; 
width: 33px; 
} 
#connect a.googleplus { 
background-position: -46px -153px; 
width: 34px; 
} 
#connect a.twitter { 
background-position: -46px -194px; 
width: 40px; 
} 
#connect a.facebook:hover { 
background-position: 0 -112px; 
} 
#connect a.googleplus:hover { 
background-position: 0 -153px; 
} 
#connect a.twitter:hover { 
background-position: 0 -194px; 
} 
#footer ul.navigation { 
float: right; 
display: block; 
line-height: 24px; 
list-style: none; 
margin: 0; 
padding: 0 12px 0 0; 
} 
#footer ul.navigation li { 
float: left; 
margin-left: 15px; 
} 
#footer ul.navigation li:first-child { 
margin-left: 0; 
} 
#footer ul.navigation li a { 
color: #ab7d0f; 
font: 11px/24px "Oswald"; 
text-decoration: none; 
text-transform: uppercase; 
} 
#footer ul.navigation li a:hover { 
color: #241b18; 
} 
#footer #footnote { 
color: #ab7d0f; 
font: 11px/24px "Oswald"; 
margin: 0; 
text-transform: uppercase; 
} 

任何幫助將不勝感激。

http://jsfiddle.net/GCqfE/

Answer 1

您使用的所有footer的子元素的line-height導致頁腳垂直向下擴大，並且沒有父div給予height值他們可以自由地擴大。無論是線高度變化較小值，或規定的高度父footer DIV像這樣：

#footer { 
background-color: #e2b241; 
border-top: 1px solid #fff; 
padding: 28px 0 14px; 
height:100px; 
} 

我已經更新您的jsfiddle：http://jsfiddle.net/GCqfE/1/