Solved

CSS pushing screen view beyond 100%

Posted on 2014-09-09
25
89 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
  • 6
25 Comments
 
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40312704
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
ID: 40312716
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
ID: 40312721
thats strange, what browser are you using Gary? Im using Firefox 31 and it does have a horizontal scrollbar.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 40312725
FF
0
 
LVL 1

Author Comment

by:day6
ID: 40312756
@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
ID: 40312769
try placing all of the callout divs within another div with a width: auto
0
 
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40312778
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
ID: 40312795
@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
ID: 40312796
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
ID: 40312820
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
ID: 40312826
Change these.

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

Expert Comment

by:Gary
ID: 40312835
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
 
LVL 1

Author Comment

by:day6
ID: 40312845
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
ID: 40312858
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
ID: 40312859
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
ID: 40312867
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
ID: 40312884
change .flexslider width to 99%
0
 
LVL 58

Expert Comment

by:Gary
ID: 40312896
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
ID: 40312897
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
ID: 40313176
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
ID: 40314357
I'm glad you found a solution, does it cause any issues when opening on mobile devices?
0
 
LVL 1

Author Comment

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

Accepted Solution

by:
day6 earned 0 total points
ID: 40339826
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
ID: 40339933
sweet
0
 
LVL 1

Author Closing Comment

by:day6
ID: 40356548
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

728 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