www.webdeveloper.com
Results 1 to 3 of 3

Thread: Footer Trouble

  1. #1
    Join Date
    Feb 2013
    Posts
    4

    Smile Footer Trouble

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


    HTML Code:
    	<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:
    /* 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;
    }

  2. #2
    Join Date
    Feb 2013
    Posts
    4
    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?

  3. #3
    Join Date
    Feb 2013
    Posts
    4
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles