Unwanted horizontal scrolling due to footer padding and margin

HTML & CSS
1

Hello, I am hoping that you can take a look at www.aparkforus.org. I want to have the footer extend all the way accross the screen. I accomplished this with:
#footer {
background-clip: padding-box;
border-top: 20px solid rgba(30, 84, 8, 0.5);
margin-left: -50%;
padding: 0 50%;
}
in my wordpress mantra child theme. This has the unintended effect of pushing the width of the page beyond the the width of the html element requiring a horizontal scroll bar to appear. Not good as my design has a border around the html element.

If I remove the footer margin and padding, then the footer remains the size of the wrapper div (1000px).

Is there any way around this within the css?

Thanks for your help.

2

Is there a way to make html{overflow:hidden;} only work on the horizontal?

3

I just learned about overflow-x: hidden;. That seemed to fix the issue at least in the browsers I can test.

4

Is there a way to make html{overflow:hidden;} only work on the horizontal?

aside from the fact that ONLY SOME, not all , browsers support overflow-X/Y, what you are trying to do is a bad idea ( or rather the way you are trying to do it)

overflow-X/Y, will automatically scroll the opposite axis. so it wouldn’t be the clean solution you are looking for.

A better way is to consider placing your footer outside the wrapper, styling the inner contents so that they center pr position as desired.

It should be easy enough to bring in the wp-footer() after the close of the #wrapper div.

5

Thank you for your reply. When I looked it up, most browsers support it aside from IE8 and below. I will continue to do browser testing.

I am working with a child theme in Wordpress. I prefer not to alter the original theme files due to upgrading issues. I may be able to do something within the function.php file that moves the footer element.

It seems to be working in Chrome, FF, and Konqueror. I am not supporting IE7 with much of my use of CSS3. Are there other reasons that it should not be used?

6

I would then suggest using an AP’ed pseudo element to generate a faux bg.

Aside from the overflow issue, using padding the way you are is going to cause all the child element stop collapse to nothing ( unless you set fix widths, then we have a whole lot of other issues), but i assume you have given your footer a set width somewhere else in your code ( so that the padding will be added , rather than taken from) the size of the footer.

So you MAY be able to get away with it… until you have to put any other type of content or style what you already have in a different way.

You should note also that the extra width is still dependent on the #wrapper size. so if you stretch your view port wide enough you can see where the color ends. This is probably not a big deal just something to note.

an alternative way to tackle this:


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			body{min-width: 960px; margin:0; padding:0;}
			#wrap{
					width:960px;
					margin:0 auto;
			
			}
			.fut{  
			
					/*
					 since your footer bg is a color and not a gradient or image,  are only supporting late coming browsers, and you can extend support eaaasily by adding  vendor prefixed rules this might work for you. 
					 
					 
					 box-shadow: [width of your wrapper], 0  0  color (RGBA is ok to use), -[width of your wrapper], 0  0  color (RGBA is ok to use);
					 i added  3 more shadows , offset by 10px  vertically to fake the border, then used the vertical margin to  make room fr the fake border.
					  
 					*/
					box-shadow:  960px 0 0 pink, -960px 0 0 pink, 0 -10px 0 red, -960px -10px 0 red, 960px -10px 0 red ; 
					background:orange;
					margin-top:10px  /*accommodating for the faux border*/
}
 		</style>
	</head>
	<body>
<div id="wrap">
	<div>Your content </div>
	<div class="fut">dsasgdga</div>
</div>
	</body>
</html>