Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 101
  • Last Modified:

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

0
day6
Asked:
day6
  • 10
  • 9
  • 6
1 Solution
 
Joshua GrantomSenior EngineerCommented:
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.
0
 
GaryCommented:
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.
0
 
Joshua GrantomSenior EngineerCommented:
thats strange, what browser are you using Gary? Im using Firefox 31 and it does have a horizontal scrollbar.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GaryCommented:
FF
0
 
day6Author Commented:
@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.
0
 
Joshua GrantomSenior EngineerCommented:
try placing all of the callout divs within another div with a width: auto
0
 
Joshua GrantomSenior EngineerCommented:
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
0
 
day6Author Commented:
@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.
0
 
Joshua GrantomSenior EngineerCommented:
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%
0
 
GaryCommented:
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
0
 
Joshua GrantomSenior EngineerCommented:
Change these.

.flexslider {
width: 100%;
margin-left: 0;
0
 
GaryCommented:
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/
0
 
day6Author Commented:
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.
0
 
GaryCommented:
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
0
 
day6Author Commented:
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.
0
 
day6Author Commented:
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.
0
 
Joshua GrantomSenior EngineerCommented:
change .flexslider width to 99%
0
 
GaryCommented:
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.
0
 
day6Author Commented:
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.
0
 
day6Author Commented:
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.
0
 
Joshua GrantomSenior EngineerCommented:
I'm glad you found a solution, does it cause any issues when opening on mobile devices?
0
 
day6Author Commented:
Joshua g, not that I've tested so far.
0
 
day6Author Commented:
Found a piece of the SLIDESHOW CSS file that used a -36px margin on left and right which caused the page to be too wide. I removed that from the CSS file and it fixed the issue.
0
 
Joshua GrantomSenior EngineerCommented:
sweet
0
 
day6Author Commented:
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.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 10
  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now