I'm trying to use sticky footers on my page but I'm having a problem where the footer appears below the window, even if there is no content.
This page says that this is caused by using margin on some of the elements, thus the footer is being "pushed" down by the accumulated values of the margin's. The page suggests to replace margin with padding, but that breaks my design, since they aren't exactly the same thing.
What else can I do to "pull" the footer up?
Here's a link to show my problem: http://john2x.com/wordpress/?p=4
If your div has padding maybe you should also sum the top and bottom paddings to the negative margin you're giving to it...
So for example if your div has 10px top and bottom margin, I think you should add 20px to its negative margins.
If there are elements with margin inside the footer that are pushing it down, maybe you should also add those margins to the negative margin of the footer.
I believe this is being caused by your #page-wrap min-height being set to 100%.
I think the easiest solution would be to move your footer div within the #page-wrap div, then it will fall within the bounds of the page.
Hope this helps!
Related
I'm working on this website: www.lumn.net . The center panel (#overall) is supposed to be a div that stretches from the top to the bottom of the page. For some reason I can't figure out, I'm getting space at the bottom of every page. Even stranger, on only two pages, lumn.net/index.shtml and lumn.net/about.shtml, there's space at the top and the bottom both. <-- fixed
html and body both have height:100%.
If I set the height of the center panel to 100%, on the pages with extra space only at the bottom, it instead goes to 600px, a minimum height for one of its internal divs, and content beyond that runs out the bottom. On the pages with extra space at both the top and the bottom, nothing happens.
Setting top:0 and bottom:0 for the center panel has no effect on any of the pages.
I have no idea what I'm doing wrong or how to fix it other than things I've already tried.
Update: the problem with the space at the bottom was due to my footer being outside the center div and moved up into it using negative margins. When I move it inside, however, I still have a strange bit of extra space below it: lumn.net/about.shtml. How can I sit it inside my #overall center div properly?
Try changing the padding-bottom on #overal:
padding-bottom: 18px
Does that solve your problem?
On the homepage and about page you have some strange extra characters "? "
Maybe a php tag badly open?
Have you tried tp put a height of 100% on #overall? (for me it works...)
Your footer has a height of 28px (including the border) and a top of -42px. That leaves 16px of #overall sticking out below it - only 8px of which seems to be intentional.
As for the top of the page, that seems to be caused by an extraneous question mark (barely visible in the upper left-hand corner of the page).
i have a problem with a stuck down footer not been pushed down by 2x DIVs in the main content area.
www.superwideprint.com/swp2
for some reason the 2 content containers arnt pushing the footer down when the screen resolution is low, i have added a clear:both div above the footer but to no avail.
can anyone help me please.
style sheet and main page can be seen from the link above. been at this for hours now.
The footer's position is set to absolute, so the content div is not going to affect it. Setting the position to relative will not help either, as this means your bottom: 0 code will push it to the bottom of whatever it is in, not the page.
What you're after is a sticky footer, try this http://www.cssstickyfooter.com/ or http://ryanfait.com/sticky-footer/
The reason is the #footer DIV is position:absolute. So, remove position:absolute form your footer.
A part from that your want your footer always stay at bottom then you can use Sticky Footer technique. Check this http://ryanfait.com/sticky-footer/
I just made a 100% height div on this page, but (at least in Chrome and Chromium), there are slight top and bottom margins. I want to have the div cover those, but I don't want to resort to using to a specified height, as I'll be using the same set-up across multiple pages.
Do your html, body and div elements all have border:0 and margin:0?
Set border, margin and padding to 0.
I'm having trouble getting my footer to stick to the bottom of the page. It works in 1024x1280, which is what I'm designing for, but the #content section overlaps the footer and causes white space at the bottom of the window as soon as I test it in 1024x768 and 800x600. I've tried:
Setting the footer position to absolute w/ bottom:0 ;
Using position:fixed, which works, but overlaps the content. I want it to appear after the content.
Adding padding to the container and pulling the footer up with a negative margin
Adding padding to #content and pulling the footer up with a negative margin
Using a horrible hacky #push div set to the same height as the footer
Here's the page that's having the problem.
At this point I'm about ready to throw some Jquery at it and be done, but if there's a CSS way to solve the problem I'm open to suggestions.
Edit: If things look a bit wonky for a moment, it's because I'm adding a plugin to stretch the background image. Pardon the mess!
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.