I've looked through multiple answers and for some reason I cannot get any of them to work. I am trying to have the footer of my website placed at the very bottom of the page without any space below it.
Here is a link to my website. Right now only the index and about page are up.
I am a student, so I know that my code isn't the best, but I'm getting there!
My CSS:
html {
height: 100%;}
#wrapper {
position:relative;
background: #fff;
width: 990px;
min-height:100%;
margin: auto;}
footer {
clear: both;
height: 175px;
width: 990px;
background: #005959;
position: absolute;
bottom: 0px;
left: 0px;}
And my HTML is a basic wrapper, header, content, footer thing.
The problem is that the parent container is acting as the wrapper and essentially has a height of 0. Thus, when you absolutely position the footer to the bottom, it is positioning to the bottom of that wrapper, which is at the top of the page because it has no height. You can float your footer and it will show up below. Try this corrected CSS on your footer:
footer {
float: left;
width: 100%;
clear: both;
height: 175px;
width: 990px;
background: #005959;
}
EDIT:
If you float all of the interior containers it will force the footer to the bottom:
header,
img#slideshow,
section#mainContent,
footer {
float:left;
width: 100%;
}
footer {
height: 175px;
background: #005959;
}
Just add this to your css:
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/e0d8my79/23/
Since you have set your <section> as an relative so footer will be positioned according to it
Bring footer out of <section> tag or remove relative positioning from section tag
Related
I'm having a small css issue with a basic html layout .
What is want is this : (without content)
http://jsfiddle.net/cge89ef4/1/
With content : http://jsfiddle.net/cge89ef4/2/
As you can see , the footer remains stuck and does not go to the bottom of the page as i want it too.
CSS :
body {
background-color: blue;
color:red;
margin: 75px auto 50px;
height:100%;
}
div#fixedheader {
position:absolute;
top:0px;
left:0px;
width:100%;
height:75px;
background:yellow;
}
div#fixedfooter {
position:absolute;
bottom:0px;
height:50px;
left:0px;
width:100%;
background:black;
}
Any way to fix it ?
Thanks
UPDATE
I have changed the DOM to HTML5 Tags for Header and Footer , I have also added a little JavaScript that reacts to the window resizing.
So IF your window height is more than the document height the footer is positioned absolute to the bottom, IF not the footer is positioned FIXED above the content
Also if you scroll down and the header is not visible any more it becomes fixed above the content as well
http://jsfiddle.net/cge89ef4/8/
UPDATE END
Here http://jsfiddle.net/cge89ef4/3/
change absolute to fixed for footer
position:fixed;
If you dont want the footer to overlap your content at any time you should add a margin or padding bottom to the content container with the height of the footer.
In addition you could look intho HTML5 tags , because there are already preset tag names for header, footer etc
For exampe:
<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>
use this styling for your body
body{
position: relative;
margin: 0;
}
Just make sure you give position: fixed to header and if you want the footer not to be fixed all the time, use a min-height.
body {
background-color: blue;
color: red;
margin: 75px auto 50px;
height: 100%;
}
div#fixedheader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 75px;
background: yellow;
}
div#fixedfooter {
position: fixed;
bottom: 0px;
height: 50px;
left: 0px;
width: 100%;
background: black;
}
Fiddle: http://jsbin.com/behajakuse/1/edit?html,css,output
have the body position: relative;
I'm currently having a few issues keeping my footer at the bottom of the page and below the content. I currently have it sitting at the bottom of the page, just keeping it below the content seems to be the issue.
My footer layout is:
#footer
#footer-content
p.copyright
p.credit
/#footer-content
/#footer
My stylesheet:
#footer {
overflow: hidden;
clear: both;
max-width: 940px;
padding-top: 26px;
border-top: 1px solid #bbb;
color: #aaa;
position: fixed;
height: 80px;
width: 50%;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
padding-bottom: 0;
text-align: center;
}
#footer-content {
width: 100%;
}
Setting position to absolute makes the whole footer disappear somewhere off the page so I can't just change that.
What can I do to keep my footer below the content? I'm open to any JavaScript solutions.
FIDDLE (Since it's WordPress I can't copy over everything)
EDIT:
Made a few edits. Still doesn't change my problem.
What you are describing is a footer that's on the bottom of the content. Defining the stuff in your footer div is unneeded information. You could have a diamond unicorn in the footer for all we care. The real information that's needed is the basic layout aka header region, content region, sidebar regions, footer region.
here is a live demo of what this will do http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
This will expand the content on short content to push the footer to the bottom. for longer content the footer is under the content as the content gets bigger.
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
You need a container that will take up the view area and by setting the footer div to the absolute bottom of the container it will be on the bottom. the content "body" will expand the container as needed and the footer will be on the bottom just under the content every time. divs by default have a display:block so they will push to the next line every time.
I use this code across any websites that I make and it works for me -
#footer{
display: block;
text-align: center;
font-size: 0.75em;
bottom:0;
width: 100%;
height: 30px;
position: fixed;
}
I would believe that all your position: fixed is causing the problem, so I've tried cleaning it up for you in this JSFiddle.
The position: fixed; sets the divs position relative to the browser-window, and not the page.
I have editted your JSFiddle to apply a 'sticky footer'.
Your document structure had to change for that:
body
#container
...content...
#wrap-push
#footer
added this css:
html, body {
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -107px;
}
#wrap_push
{
height: 107px;
}
#footer
{
height: 80px;
}
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
Closed 9 years ago.
What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?
What you’re looking for is the CSS Sticky Footer.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
/* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -180px;
/* negative value of footer height */
height: 180px;
clear: both;
background-color: red;
}
/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
/* thank you Erik J - negate effect of float*/
}
<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>
You could use position:fixed; to bottom.
eg:
#footer{
position:fixed;
bottom:0;
left:0;
}
HTML
<div id="footer"></div>
CSS
#footer {
position:absolute;
bottom:0;
width:100%;
height:100px;
background:blue;//optional
}
Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.
css:
<style>
body {
margin: 0 0 20px;
}
.footer {
position: absolute;
bottom: 0;
height: 20px;
background: #f0f0f0;
width: 100%;
}
</style>
Here is the html main content.
<div class="footer"> Here is the footer. </div>
set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows
use this style
min-height:250px;
height:auto;
I have a 600px wide footer graphic that I want to be positioned in the center of the page. I currently have it fixed at the bottom of the browser, which is what I want - I want the content to scroll from underneath the footer, if you know what I mean.
With the fixed value my footer hangs on the left. With a value of relative, its centered, but stuck to the bottom of the page, and I end up having a load of blank white space to scroll down until I see the footer. Infact, removing the whole position: property has the same effect as the relative value.
How can I fix this?
I attempted ideas here - How to horizontally center a <div> in another <div>? but none of them worked =[
CSS
#footer {
position: fixed;
margin-top: -110px;
height: 110px;
width: 600px;
margin: 0 auto;
clear:both;
bottom: 0;
}
html:
<div class="footerWrap">
<div class="footer"></div>
</div>
css:
.footerWrap {
width:100%;
position:fixed;
bottom:0;
}
.footer {
margin:auto;
width:600px;
height:110px;
}
working demo
hope this help
Try this
html, body, and other div relative {
width: 100%;
}
#footer {
position: fixed;
margin-top: -110px;
height: 110px;
width: 600px;
clear:both;
bottom: 0;
left: 50%;
margin-left: -300px; /* half size of footer */
}
I seem to have a problem with the footer on my website. Basically its not sticking to the bottom of my page, but sticking to the bottom of my div, called main. Can anyone help me with this?
If you zoom out on the webpage you will see the problem :)
this site
Im not pasting in the code, cause its a lot of php includes and such. Hope it's okay. :)
footer css:
#footer{
width: 100%;
float: left;
height: 70px;
bottom: 0;
clear: both;
background-image: url("../images/footer_pattern.png");
display: block;
}
#footer{
width: 100%;
height: 70px;
clear: both;
background-image: url("../images/footer_pattern.png");
position: fixed;
bottom: 0;
}
For the website you are referring to, by extending the wrapper div, it will push the footer down. Below is the modified css for wrapper.
#wrapper
{
height: 100%;
margin: 0 auto;
min-width: 1000px;
}
Put 100% for the height instead of auto.
By making the wrapper height to 100%, it extends that div to the bottom of the window and pushes the footer down as well.
Another thing I would change is not make #footer float left.