I'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?
This is the site:
http://ec2-23-23-22-128.compute-1.amazonaws.com/
And this is what I'm trying to accomplish:
How do I get rid of the extra white space at the bottom of the page?
NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/
It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:
* {
margin: 0px;
}
I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.
Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:
#b-container {
background-color: #F1EFE6;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; // originally this was 0 auto -150px
}
Related
I have a weird bug on my website which I've never seen before. The link to the live demo is website
On Mobile view, body and html is overflown and I can scroll the whole body to left and right. After inspecting, I know that the culprit is Navigationbar-toolbar. Somehow it has the extra position right -6px which I don't understand. Anybody knows how to fix this issue? I've tried setting overflow: hidden to , but none is working.
In the screenshot below, notice that there is a scrollbar at the bottom of the webpage.
I will provide further SCSS code if required.
As #Schwierig said, the real culprit is the slider, for desktop view, I want the slider's items to be fitted to the left and right edges so I added this class to the slider:
.Slider--fitEdges {
// Fix edge
.slick-slide {
margin: 0 18px;
}
.slick-list {
margin: 0 -18px;
}
}
Now I just have to wrap it inside a media query for it to work in desktop only.
I'm using the bootstrap 3.0 framework and no matter what I do I cannot get the little white space after the footer to disappear.It only shows in Chrome though, in IE it's fine.
I've used min-height, overflow:hidden,different margins still nothing.
http://www.bootply.com/XonUL6Vq2C
I'm sure there is some simple fix that eludes me.However it is driving me mad.
Can anyone offer a solution to this?
In your CSS, you are using 50px margin for both the top and bottom of the footer.
Remove the margin from your footer.
If you want to apply margin only on the top of the footer, use this:
footer {
margin: 50px 0 0 0; /* or just use: margin-top: 50px;*/
}
UPDATED CODE
You are using min-height and padding bottom in #cfoot.container. Remove that and you'll get as you expect.
working demo
Just add a negative margin-bottom until the white space is filled.
E.g
footer { margin: 0 0 -50px 0;}
It sometimes also happens when you forget adding a closing tag of a section.
I have been getting an unknown white-space at the bottom of my Service pages. I'm using column-count: 2; to break the images up between two columns.
Update: This is a Webkit browser problem
The problem is the extra space at the bottom of mainCont, left side column.
If the images all line up flush then there is about a 30px of unneeded white-space. Although if the images do not line up flush then there is about a 50-70px of extra white-space. I have a 10px padding on the main containers but I can't find what is creating the extra spacing.
Here is a JSFIDDLE (remove/show in url to view code) to see what the problem is. Also here is the Live Site so you can see how it affects each one of the service pages.
CSS for main container:
.mainCont {
width: 100%;
background: #f7f7f7;
padding: 10px;
position: relative;
margin-top: 2.5%;
}
Edit
There is about 160px of extra space at the bottom minus 20px(mainCont and gridbox img equals 20px in padding).
I have been making research since ysterday.
If image sizes are equal, no problem on all browsers
If image sizes are different, extra space occurs at the bottom of
the page.
This is the bug of chrome browser. There is something wrong with balancing algorithm. They haven't resolved this issue yet. You can see here
Can anybody tell me why am i getting empty space on left and right of html body in this link click here. I am using mozilla firefox. I have even tried reducing width of html tag to 980px. I am getting horizontal scroll bar because of that extra space on left and right. Please help.
The first div under your header div (under <div id="header">) has this inline style
width: 100px;
margin: auto;
height: auto;
border: 0px solid rgb(51, 51, 51);
padding-right: 1160px;
padding-left: 95px;
Look at padding-right. Is that meant to be like that? Removing that gets rid of your horizontal scroll bar. It does nudge your header around a bit, but that may be your culprit. Or you could just do what Spring said, but that's not really clearing the issue as your jus hiding the overflowing elements and not stopping it from overflowing in the first place.
Its quite hard to do much more using Firebug on your site because there is so much going on (you have over 40 scripts loaded!) that the DOM keeps changing. You might wanna clean up some of those scripts and get rid of stuff you don't need, you're adding a lot of unnecessary bloat which will slow down your site, but that's a whole other subject.
you can add to body element this style
body
{
overflow-x: hidden;
}
I tried this style using fierbug and it worked for your page
I'm coding a Wordpress theme and I'm having an issue displaying 5 dynamic post thumbnails next to each other (left floated) with a 20px right margin within a centered div.
here's a link to a page: http://www.lesfourchettes.net/info (the issue occurs when you click on "Les Prèfs" in the top navigation: the top menu and the below content moves 10px to the left.)
Here's the issue:
the site has a 960px width and is centered. (#wrapper)
the 5 dynamically generated post thumbnails are 176px wide with a 20px right margin each. (#.prefs-thumbs)
i choose these dimensions for the thumbnails thinking i would have 5 thumbnails and 4 margins between them which would add up to 960px.
but the reality is that the last thumbnail of each row also has a 20px margin and therefore the whole thing adds up to 980px (20px wider than the site).
the only solution i found for showing 5 thumbnails per row was assigning a 980px width to the thumbnail div (#prefs).
however this seems to provoke an issue with the centering of the rest of the content which is no longer centered with the 960px site width but width the 980px thumbnail div.
so whenever i click "lesprefs" to display the thumbnails (using a little jquery function), the whole content moves to 10px on the left.
The whole thing is a bit complicated to explain. But i feel like there is surely an easy CSS solution to my problem. Perhaps something to do with the overflow property, display property or someting like that... I'm just not good enough with CSS yet to identify the solution and my issue being so specific, I haven't found the answer on the web.
i feel like the problem lies within those lines of CSS:
#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}
#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}
.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}
Any help would be greatly appreciated.
Cheers!
You're noticing the 10px shift because the page height is increasing, and a horizontal scroll bar is being added by the browser.
My preferred solution to this problem is to always show the horizontal scroll bar, with the following CSS (works in all modern browsers):
html { overflow-y: scroll; }
I see the centered alignment shifting toward the left because of the vertical scroll that appear on the right side of the page.
First thing to solve is the actual fitting of the elements in your block.
You need to remove the right-margin from the last element in each line..
So either set a class to the last item which overrides the margin with marign-right:0 or (for modern browsers) do it purely in CSS with
.prefs-thumbs:nth-child(5n+1){
margin-right:0;
}
reference: http://www.w3.org/TR/selectors/#nth-child-pseudo
You also need to remove the border from the images as that gets added and instead of 176 pixels each of your images occupies 180 pixels (it has 2 pixel border around it)
So, correct your math first..
The issue with the moving of the content, is that the scroll bars appear once the content exceeds the page height (as expected). One solution is to keep the vertical scrollbar alwats visible, as #wsanville suggests in his answer.