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/
Related
I've completely at logger heads with how I can get this footer to align with the bottom of the sidebar if zero content is in the space between the header and footer.
Sticky footer is not the solution because I don't want it to be at the bottom of the window. But inline with the bottom of the sidebar instead.
Here is an image of what it should look like but without the coloured blocks there at the moment they push the footer down where it is now.
I can't provide much code as this is on my local server, and is segmented and broken down into different files for wordpress.
screenshot http://s3.amazonaws.com/awesome_screenshot/2110547?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1368128529&Signature=GjSmfhU6%2BZoYmSUj6oMEcvNXTEs%3D
as you can see the above screenshot is how I want the sidebar and footer to be with no content there.
Here is another screenshot showing my current problem, you can see how it latch's on to the bottom of any content on the page and sticks just below it.
http://awesomescreenshot.com/015198m642
Thanks in advance.
The sidebar needs a float:right; then create a div between sidebar and footer with clear:both;, have the css for your footer include margin-top:-xx (whatever pixels the footer height is). You might also need to throw a position:relative on there.
http://jsfiddle.net/uuTDG/
Fixed this by adding position relative to my container, then adding position absolute and bottom 0 to my footer.
Thanks anyway for the help
I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.
Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.
I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.
My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.
Here is an example of my current code: http://jsfiddle.net/ySru9/1/
I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css
I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?
If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:
http://jsfiddle.net/willemvb/PZHvH/
try using:
#container
{
margin: 0 0 0 -100px;
position: relative;
}
Check this fiddle:
http://jsfiddle.net/ySru9/39/
I have a page where the main content has a variable height. I want to have a fixed height (about 50px) footer to the very bottom of the page.
I need it to scroll along with the page (so not a fixed position).
A couple scenarios:
If the body content is 300px tall, the window has no scrollbar, the footer would be all the way to the bottom and visible.
If the body content is 900px tall and the window has a scrollbar, the footer would be all the way at the bottom with no space between the footer and the bottom of the window, and not visible unless you scroll to the very bottom.
Is there a way to accomplish this in pure CSS? Trying to stay clear of using JS to handle this.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/gLpFJ/
demo: http://jsfiddle.net/gLpFJ/embedded/result/
Note: Please note this http://jsfiddle.net/yp4EH/ is not for the answer it is just for demonstration purpose.
I am giving this for help and for concept purpose This fiddle http://jsfiddle.net/yp4EH/ is not related with this question but based on same situation - sidebar, content, footer at bottom always.
http://mehulkar.com/CD
This is driving me insane. I have a fixed position header and a fixed position footer. I want the page class to scroll between the two.
For some reason, my page class starts at top:0 of the entire document, instead of starting below the header.
I could bypass the problem by relative positioning all contents of the div by the appropriate height, but I will be using page IDs to navigate the page. So when I navigate to an #ID using an a link, it navigates to the top of the document.
How do I fix this!?
Your header position is fixed, which takes it out of the flow of the document. Not only does that mean it sits where you put it, but it also means it doesn't push the content below it downwards.
Easy fix would be to add a margin to the page div that's exactly the size of the "always-on-top" header.
your css class "cleared" seems to have a height of 0. make sure the min-height is set to 100px
To start with try changing your page class property:
margin:0 to margin-top: 100px
To move the footer to the left, if that is what you want remove:
right: 0 from your #footer css.
Also remove position:absolute from #content css and add margin-left:200px;
And add margin-bottom:50px to the .wrap class in css.
Once all these changes have been made you should have your header at the top, footer at the bottom, both left aligned. And the content of the page readable and scrollable between the header and footer, with it all being visible with scrolling.
Any questions just ask.
I have one div with position:fixed 0; that stays on the top of the browser window even when I scroll down.
The problem is the adsense banners (iframes) that are out of the fixed div (thus in the main site's content div that should appear under), when I scroll down, they go OVER the fixed div and not below it.
I tried to apply a clear: both and z-index to both elements but nothing changed.
Can't iframe not go below fixed elements?
thank you
You need to have proper positioning for z-index to work. Makes sure the iframe container is position:relative or position:absolute