Using CSS full width footer in WordPress

CMS & WordPress
1

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.

.footer
{

    width: 100%;
    height: 145px;
	  left: 0;
	right:0;
	background: none repeat scroll 0 0 #bababa;
}

and the html:

<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

Hi Dr.Dee. Welcome to the forums. :slight_smile:

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

ralph, thanks for the response, but how can do that? :rolleyes:

4

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

Glad you fixed it. Sounds like it may have been a missing tag, then. That’s where the HTML validator is very handy.