I am using the sticky footer script from (Ryan Fait website) which works great, but the moment I resize my browser (or minimize it) the footer pushes to the top over other text, and breaks completely.
I have a live example at (sports and events website)
Any ideas on how I can fix this?
Define your ID #mian_content :overflow:hidden;
as like this
#main_content {
overflow: hidden;
}
Result is this
You forgot to add clear:both to your #footer, .push rule. Add in the css as below and it will work.
#footer, .push {
height: 202px;
clear: both; /* add this */
}
Related
I use this code on my test page to clear header-container float, but doesn't work. Can I force it somehow?
#header-container{
position: relative !important;
clear: both !important;
overflow: auto !important;
}
Use this approach:
#header-container:after {
content: ' ';
line-height: 0;
display: block;
clear: both;
*zoom: 1; /* trigger hasLayout for IE 6/7*/
}
I also suggest to take a look at talented Nicolas Gallagher's Micro clearfix
Update:
Per the OP's explanations, (at the comments below):
That header-container floats on top and stays there when i scroll and
i don't want that.
That is not a clearing fix issue, None of #header-container's children are floated.
The point is the .viewitem-panel and .viewitem-inner elements are positioned to stay at the bottom of the page, right under the header, and .viewitem-inner has a overflow-y: scroll; CSS declaration to scroll the content.
So, This problem can not be resolved unless the layout is changed.
place clear in a separate class
.clearfloat{clear: both}
and then place it after the div you wanna clear float
<div id="header-container">
</div>
<div class="clearfloat"> </div>
Main markup
<body>
<div id="contenedor">
....
</div>
<div class="fLeft"> <footer > ... </footer> </div>
</body>
CSS
body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }
I guess best way is to firebug the page..
http://209.51.221.243/integracion/login.php
As you can see, the footer is above the middle of the page behind the content...
At first, I thought it might be that you didn't clear your float. But then I noticed that each floated element is absolutely positioned. By applying position:absolute to an element, you're ripping it out of the flow of the document. The best way to fix this is to remove position:absolute from your "widgets", but then your design won't appear how you currently have it.
An idea/suggestion to workaround your limitations is to fix the footer to the bottom of the page. Apply the following to <footer>:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
You'll notice that your footer will stay put as you scroll on the page, and that can very possibly be less than ideal, but I can guarantee it'll stay on the bottom of the page. Otherwise, you're looking at reworking your styles because of the misuse of some properties.
You use floating divs before footer, so, in order to put the footer after those divs, the css of your footer should contain: clear: both;, or clear: left;, in your case.
Docs: http://www.w3schools.com/cssref/pr_class_clear.asp and (of, course) https://www.google.com/search?q=css+clear :)
UPDATE2: I realized I was wrong. This answer does not work in this particular case.
First: This is a pretty good starting point for any footer. Use it.
Second: You may have noticed that the container that has all the floating boxes (.centerCnt) isn't big enought to fit them all. To fix this you need to use a good .clearfix. There are many to choose from, but I use this one:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
You will need this on .centerCnt otherwise the Sticky Footer won't work.
UPDATE: Simply using the clearfix would probably fix your issue. Add the code above to your CSS and give .centerCnt the class clearfix.
I've got 60 pages all with the same footer, included with php. The amount of content varies from 300px in height to 2000+. I don't think this is possible, but it would be great if I could get the footer to sit at the bottom of the browser window, if the page is shorter than the window, and behave normally (pushed to the bottom) otherwise, with just CSS. Thanks.
I know this post is pretty old, but I found a great resource for this exact thing.
http://ryanfait.com/sticky-footer/
here is just the css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Good luck.
This is waaaay too late and the answer is somewhat similar to the one by Barry P.
For your wrapper css class add the following,
min-height: calc(100vh - 155px);
Note: This does not work in IE8 or lower.
here is an article that is targeting even IE7
footer stays at the bottom when there is a little content
and drags down when there is alot of content
http://snipplr.com/view/15334/
I would try give your content a min-height of say 500px...
#content {
min-height: 500px;
}
That way, even if you only had 300px of content the 500px (or longer if necessary) would make sure that the footer is pushed far enough down to be at the very bottom.
Try adding this to your CSS
#footer {position: fixed; bottom: 0;}
I have a sticky footer which works, but I'm using a tiled background image and an inner #content div. The problem I have is that the #content won't expand to fill the height of the container. I've got a demo at http://jsfiddle.net/mpRUT/1/, where I've changed the colours to illustrate. The only thing keeping #content from collapsing into oblivion when the page is empty is the min-height set on it.
Can I get it to expand to fill the container, or do I just have to set a larger min-height and lose some browsers?
The effect can be seen at http://myfitzeek.lime49.com/
IMO: Will not work 100% without min-height. (see comments)
My old answer:
Edited sample (as fork):
http://jsfiddle.net/4EtKh/1/
#wrapper: {
/*min-height:100%;*/ /* remove! */
position:relative;
height:100%; /* new! */
overflow: hidden; /* new! */
}
#content {
text-align: left;
line-height: 140%;
background: #fff;
font-size: 1.2em;
/*min-height: 80px;*/ /* remove! */
height: 100%; /* new! */
}
Chances are good that you're going to need to set min-height: 100%; and subtract the footer height using negative margin.
#wrapper { margin-bottom: -60px; }
#footer { height: 60px; }
What are your target browsers? You express some concerns about min-height - why not design the footer to look acceptable if collapsed, so that it degrades nicely in an older browser? If you're using a sidebar in your finished design, you can use .clearfix techniques to force the footer to the bottom, which means it won't necessarily be noticeable.
Aside from doing position:fixed; on the footer and using a background image on your #wrapper to give the impression of a full-height content pane, I don't know of a way to make this work without using min-height on #content (like this).
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?
The 2nd background image on this page isn't properly positioned... I'm struggling to come up with a fix... I need the footer to be at the bottom of the page, always. min-height doesn't work because I need it to always remain at the bottom regardless of their resolution.
Is there a CSS fix for this?
-URL REMOVED-
Sounds like you are looking for a sticky footer.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
You must set html and body to have height:100%;
then to overcome another issue with body only filling the viewport, you need to put a wrapper around all your content, set its min-height to 100% and put the background images to that.
Demo code : http://jsfiddle.net/fNwNn/3/
Live view : http://jsfiddle.net/fNwNn/3/show
I think what you want is position: fixed
Try this:
#footer
{
position: fixed;
bottom: 0px;
}
This will 'stick' the footer to the bottom of the window.
James
See if this is what you want:
http://www.designersandbox.com/code/always-bottom-footer-with-css-only-tutorials/
and a live example:
http://demo.designersandbox.com/always_bottom_footer/index.html
If you actually want the footer to be able to cover the page contents, then you should remove this line
#vc-body{padding-bottom:80px;}
from the given example.