Link to home
Start Free TrialLog in
Avatar of day6
day6Flag for United States of America

asked on

CSS pushing screen view beyond 100%

I have the following page I'm assembling using a new sticky-footer method that works great. I've tried a dozen other methods that just don't work for every browser or device and this is the first solution that has. It's based on http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

The problem is that everything works fine in the layout based on his suggestion until I add another set of divs below the content div. When I put "anything" in that area below my slideshow, it creates a horizontal scroll bar in every browser I test in. Even on my phone.

I've still not debugged the footer on the iPhone yet, but from a browser standpoint, it's looking great.

So my question is what is causing the overall viewport to add a horizontal scroll bar when I add the three callout boxes below the slideshow?

I've been debugging for hours and can't figure it out.

THE BETA TEST PAGE:
http://superiorsample.com/newsite/index.cfm

The CSS styles:
html,body { height:100%;}
body {
	margin: 0;
	padding: 0;
	color: #000;
	display:table;
	width:100%;
	background:url(../../images/pgBKG.jpg) no-repeat center fixed
}
.lgo {
	margin-top:-10px;
	background-color:#273794;
	width:162px;
	position:absolute;
	float:left;
	z-index:2400;
	padding:8px;
	border-radius:0 0 15px 0;
}
.header {
	background: #273794;
	display:table-row;
	width:100%;
	height:36px;
}

.content {
	display:table-row;
	height:100%;
	width:100%
}

.callout {
	width:26%;
	height:250px;
	border-radius:15px;
	padding:1%;
	border:1px solid #000;
	background-color:#fff;
	margin-left:2.5%;
	float:left;
	margin-top:10px;
	margin-bottom:10px;
	display:table-row
}


/* ~~ The footer ~~ */
.footer {
	padding: 10px;
	background: #000;
	display:table-row;
	height:150px;
	width:100%;
}

Open in new window

Avatar of Joshua Grantom
Joshua Grantom
Flag of United States of America image

its a combination of all of the widths being 100%.

Change the body, header, footer, container, and content to width to 96%

this will help you out. I would also try and stay away from tables as much as possible. you can create divs for that instead.
Works fine for me, the slideshow LI's are a fixed width based on the browser size at load, so if you reduce the browser size then you will see the scrollbars.
thats strange, what browser are you using Gary? Im using Firefox 31 and it does have a horizontal scrollbar.
FF
Avatar of day6

ASKER

@Joshua G  the reducing of the body width only makes the screen view show the footer, header and slideshow having a blank spot on the right, which is not a true side-to-side / full screen width dynamic flow design. The issue is that if I just remove the 3 callouts from the page code, the problem is solved. The horizontal scroll bar goes away. So I can't figure out what is causing it to blow up the width. Even if I just had ONE of the three callout boxes, it still blows up.
try placing all of the callout divs within another div with a width: auto
I would also change

background:url(../../images/pgBKG.jpg) no-repeat center fixed

to

background:url(../../images/pgBKG.jpg) repeat-x center fixed

Just for cosmetics
Avatar of day6

ASKER

@Joshua G

Makes no difference if I put a wrapper div around them within the CONTENT div or below it, same end result. Width:auto doesn't help. I added the display:table-row to it, didn't help. I don't get what's blowing up the page.
the reason that it is creating a horizontal scroll bar is because once the page requires a vertical scroller, it is decreasing the width by 20 px. in return, this causes a horizontal scroll bar so you can view the 20 pixels that are cutoff by the vertical scroll bar. It doesnt really matter if you are adding callout boxes or 3 paragraphs, it is going to add a bar because of issues with your width settings being 100%
Weird it was working fine with Firebug open but not when I closed it.

Remove all the table declarations you are using - they only screw up the layout and it's not intended for this, also remove the padding on the .footer

You will need to add to the .footer
clear:both

Then the page will layout correctly
Change these.

.flexslider {
width: 100%;
margin-left: 0;
Looking over that sticky footer link - naff!

This has worked in every situation I have used it and is simple to implement.
http://www.cssstickyfooter.com/
Avatar of day6

ASKER

Gary, that sticky footer link has NEVER worked after trying it dozens of times in my layouts. It doesn't push down on a smartphone without having to artificially add a min-height attribute or something.
Well if you are going to make everything act like a table then you may as well use a table instead of trying to make 21st century technologies behave like it's 1980.

If it's not working on tablets et al it probably means you need to add some media queries to resize the padding and negative margin if the size of the footer is increasing. But since you have nothing in your footer it's hard to know how it looks
Avatar of day6

ASKER

Made every change you both recommended and it still creates a horizontal scroll bar. The problem is that I have other sites I've made with full side-to-side divs and have never had this issue. It's when the browser creates the vertical scroller than the horizontal scroller appears (as Joshua G identified). I've also not had a site create a horizontal scroll bar when the vertical one shows up, even with a 100% width on the header div and footer div.
Avatar of day6

ASKER

Gary, the tables inside a div have never created an issue. I see a ton of websites having my layout concept (full side to side dynamic flow divs) that don't have an horizontal scroll bar but use divs. The table concept was a simpler debug to get my sticky footer to finally work.
change .flexslider width to 99%
I'm not talking about the actual table you have in the code, it's the css that you are using that is making every div behave like a table.
Make the changes I said and upload them, then it should be a 5 minute exercise to implement a proper sticky footer.
Avatar of day6

ASKER

Joshua G... did that already. Experimented with everything in the slideshow.css but the less that 100% creates the slideshow less than the full viewport width I desire.
Avatar of day6

ASKER

Joshua G, if I add overflow-x:hidden to the body css, it removes the horizontal scroll bar and removes the issue. I'm not sure this is the best solution, but it worked.
I'm glad you found a solution, does it cause any issues when opening on mobile devices?
Avatar of day6

ASKER

Joshua g, not that I've tested so far.
ASKER CERTIFIED SOLUTION
Avatar of day6
day6
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of day6

ASKER

None of the suggestions had anything to do with fixing the issue. It was an area of the CSS that I removed and it worked fine.