Footer Trouble

[michaelw90]

Hi there, I am having a problem with my footer, and I'm unsure how to solve it.

http://bildr.no/view/1403363


As you can see from the image i linked, the footer background doesn't cover all the information in it. I'm guessing this is probably just a rookie mistake, but I'm having problems figuring out what I'm doing wrong. Here's the footer code (HTML and CSS).

	<footer id="main-footer">

		<div id="footer-wrapper">

			<section id="footer-copyright">
				<p>Digitalfabrikken (c) 2013  |  Torvgården (c) 2013</p>
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now</p>
			</section><!-- END #footer-copyright -->

			<section class="footer-info">
				<h3>Butikker</h3>
				<a class="aside-link" href="#">Neoz</a>
				<a class="aside-link" href="#">Boutique L</a>
				<a class="aside-link" href="#">Friis Company</a>
				<a class="aside-link" href="#">B.Young</a>
				<a class="aside-link" href="#">Kiesler hårdesign</a>
				<a class="aside-link" href="#">Spenst</a>
				<a class="aside-link" href="#">Parfymeri Clinic Ethic</a>
				<a class="aside-link" href="#">Cacao sko</a>
			</section><!-- END .footer-info -->

			<section class="footer-info">
				<h3>Kampanjer</h3>
				<a class="aside-link" href="#">Høstkampanje</a>
				<a class="aside-link" href="#">Valentines 2013</a>
				<a class="aside-link" href="#">Bli ny</a>
			</section><!-- END .footer-info -->

			<section class="footer-info">
				<h3>Åpningstider</h3>
				<a class="aside-link" href="#">Høstkampanje</a>
			</section><!-- END .footer-info -->

			<section class="footer-info">
				<h3>Om torvgården</h3>
				<a class="aside-link" href="#">Høstkampanje</a>
				<a class="aside-link" href="#">Valentines 2013</a>
				<a class="aside-link" href="#">Bli ny</a>
			</section><!-- END .footer-info -->

		</div><!-- END #footer-wrapper -->

	</footer><!-- END #main-footer -->

/* FOOTER */

#footer-wrapper {
    width: 980px;
    margin: 0 auto;
}

footer {
    background-color: #282828;
    padding-top: 45px;
}

#footer-wrapper {
    width: 980px;
    margin: 0 auto;
}

#footer-copyright {
    font-family: "Pill Gothic", Georgia, serif;
    font-size: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    line-height: 15pt;
    color: #b6b6b6;
}

.footer-info {
    font-family: "Pill Gothic", Georgia, serif;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 17pt;
    color: #b6b6b6;
    float: left;
}


.footer-info a {
    font-family: "Pill Gothic", Georgia, serif;
    font-size: 11px;
    color: #b6b6b6;
    list-style: none;
    display: block;
    width: 100%;
}

.footer-info h3 {
    font-family: "Pill Gothic", Georgia, serif;
    font-size: 13px;
}

[michaelw90]

I've realized I could give the footer a set height, though it feels as it's becoming a quick fix, rather then using the appropriate method. It wouldn't change automatically in regard to the content, anyone who has another suggestion?

[michaelw90]

Sorry, after some trial and error I found the problem...

If anyone's wondering i just had to put overflow: hidden; to the footer container