Solved

CSS pushing screen view beyond 100%

Posted on 2014-09-09
25
85 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
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
Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

 
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

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

770 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