I'm trying to create a floating header. content area and then a sticky footer.
http://jsfiddle.net/9vB5m/ it seems to be working here
http://jsfiddle.net/9vB5m/2/ covers up the footer....
Not sure why. Once i get this working. I'm then going to try to use this on my real layout.
Had to set css margin-bottom property for footer to 0.
Working code: http://jsfiddle.net/9vB5m/4/
Related
In WordPress theme, there are sticky and fixed headers. I am confused about their difference. In my opinion, sticky header is the one which sticks on the top while user scrolls page up/down. And the fixed header moves with the page scroll.
Some websites use the term Sticky and fixed alternatively that means both are same. Then what that header is called which moves with the page scroll?
I suppose the fixed header is always on the same position during the page scroll.But the sticky header maybe scroll with the page at first, and from a certain point it goes to the fixed type. Just like the right subnavigation of bootstrap document. http://v3.bootcss.com/css/
Also bootstrap provide a js plugin to achieve the sticky effect http://v3.bootcss.com/javascript/#affix
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/
When master page parsed content div always is at the very bottom. So how i can set footer to be at the bottom while not using position absolute. If you use position absolute you have to set every different page height and footer position according to the this is which i don't want. Thank you.
The most practical solution is to set a min-height in your CSS of around 700px for the main content area between header and footer.
Alternatively, you could try this (but not tested yet in modern browsers):
http://codersbarn.com/post/2008/09/10/CSS-Sticky-Footer-for-ASPNET-Master-Page.aspx
This is something I needed to implement recently on a project.
Checkout the following jsFiddle: http://jsfiddle.net/uHZgY/
Edit (Based on comment)
If what you require is a floating footer, then checkout this other SO question: How do I get a floating footer to stick to the bottom of the viewport in IE 6?.
The correct answer implements this without the need for absolute positioning of the main content.
I have taken the correct answer and created a jsFiddle for you so you can check it out.
http://jsfiddle.net/mStef/
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 am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?