Please Help Me With My Footer - html

Question

I'm using Dreamweaver to edit a template that I got for my new business website. I'm having a problem with the footer and I'm not sure if it's an HTML issue, a CSS issue, or an I'm just an idiot issue. No matter what I do the footer extends down too far. Here's a screenshot of what I'm talking about:
http://tinypic.com/r/t9ccbn/4
Also, I would like the links to line up with the column above it like the contact info and the copyright info do. Here is the 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>
info#briarpatchfurniture.com
</p>
</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li> Gallery</li>
<li>Contact</li>
<p id="footnote">
© Copyright TIBISI, Inc 2013. All Rights Reserved.
</p>
</div>
</div>
And here is the 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;
}
Any help will be appreciated.
http://jsfiddle.net/GCqfE/

Answer 1

Your use of line-height in all of the child elements of the footer is causing the footer to expand downwards vertically, and without a height value given for the parent div they are free to expand. Either change the line-heights to smaller values, or prescribe a height for the parent footer div like so:
#footer {
background-color: #e2b241;
border-top: 1px solid #fff;
padding: 28px 0 14px;
height:100px;
}
I've updated your jsFiddle: http://jsfiddle.net/GCqfE/1/