SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using CSS full width footer in WordPress

    Hi of all, i am so happy to register here. There are a lot of things to ask and learn.
    I am building a theme from scratch an i am using WordPress us CMS and skeleton for Re/design. Now i am working locally.
    The problem that i have: i want to create a footer with full width css background color, the code bellow works for index.php, but for for the other pages/categories works for 960px only and not for full length.

    Code:
    .footer
    {
    
        width: 100%;
        height: 145px;
    	  left: 0;
    	right:0;
    	background: none repeat scroll 0 0 #bababa;
    }
    and the html:

    Code:
    <div style="clear:both;"></div>
    <footer class="footer">
    <div class="container">
    		<div class="sixteen columns">
    				
    					<h1>&copy; Copyright 2013. All rights reserved.  </h1>
    				
    		</div>	
     </div> 
    </footer>
     <?php wp_footer(); ?>
    
    </body>
    </html>
    Why this happened, any solution?

    Thanks in advanced.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Dr.Dee. Welcome to the forums.

    Presumably your footer is still contained within a page wrapper that has a set width and is centered. In that case, setting your footer to width 100% means it will stretch to 960px—the full width of the container.

    In your HTML, you'll have to move the footer outside the wrapper so that it can stretch to the full width of the screen. Then you'll need an inner element that is centered and set to the desired width (presumably 960px.

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph, thanks for the response, but how can do that?

  4. #4
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Inside the page/categories and before the get_footer (); i close the page wrapper with </div> and i think that the problem resolved. Now, i have full width css background color.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Glad you fixed it. Sounds like it may have been a missing tag, then. That's where the HTML validator is very handy.


Tags for this Thread

Bookmarks

Posting Permissions

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