/    Sign up×
Community /Pin to ProfileBookmark

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

[URL=”http://bildr.no/view/1403363″]http://bildr.no/view/1403363[/URL]

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).

[code=html] <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 –>[/code]

[CODE]/* 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;
}[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@michaelw90authorFeb 28.2013 — 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?&#65279;
Copy linkTweet thisAlerts:
@michaelw90authorFeb 28.2013 — 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 ?
×

Success!

Help @michaelw90 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...