Solved

CSS pushing screen view beyond 100%

Posted on 2014-09-09
25
77 Views
Last Modified: 2014-10-02
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
Comment
Question by:day6
  • 10
  • 9
  • 6
25 Comments
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
thats strange, what browser are you using Gary? Im using Firefox 31 and it does have a horizontal scrollbar.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
FF
0
 
LVL 1

Author Comment

by:day6
Comment Utility
@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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
try placing all of the callout divs within another div with a width: auto
0
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
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
 
LVL 1

Author Comment

by:day6
Comment Utility
@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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
Change these.

.flexslider {
width: 100%;
margin-left: 0;
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:day6
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 1

Author Comment

by:day6
Comment Utility
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
 
LVL 1

Author Comment

by:day6
Comment Utility
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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
change .flexslider width to 99%
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 1

Author Comment

by:day6
Comment Utility
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
 
LVL 1

Author Comment

by:day6
Comment Utility
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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
I'm glad you found a solution, does it cause any issues when opening on mobile devices?
0
 
LVL 1

Author Comment

by:day6
Comment Utility
Joshua g, not that I've tested so far.
0
 
LVL 1

Accepted Solution

by:
day6 earned 0 total points
Comment Utility
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
 
LVL 16

Expert Comment

by:Joshua Grantom
Comment Utility
sweet
0
 
LVL 1

Author Closing Comment

by:day6
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now