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 */
}
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'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
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;
}
My project has the following requirements:
Header fixed to the top of the page
Content area has a white background and 100% height
No scroll bar when content is less than height of the screen
Must support IE7+ (a JS fix for IE is ok)
When content is taller then height of screen, scrolling it should stay within the white content area (not go under the header).
Here is my basic HTML:
<div class="wrap">
<div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>
CSS:
body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}
Example: http://jsfiddle.net/zw3WS/
First question is how to get the content to have 100% height, not go under the header, and still not have an unnecessary scrollbar?
Second, if the content is taller than the screen, how would I make it scroll only in the white space, and not allow the content to scroll under the to bar as it currently does?
For scrolling "only in the white space", you can do it by setting position: fixed on the wrapper element, then absolutely positioning the header and content elements inside:
body{
background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
overflow: hidden; /* no scrollbars for page body */
}
.wrap {
width: 300px;
position: fixed;
top: 10px;
left: 50%; /* for horizontal centering */
margin-left: -150px; /* for vertical centering */
bottom: 0;
}
#header{
position: absolute;
background:#aaa;
top: 0;
left: 0;
right: 0;
}
#content{
background:white;
position: absolute;
bottom: 0;
top: 30px;
left: 0;
right: 0;
overflow: auto; /* this makes the scrollbar appear inside #content */
}
Demo: http://jsbin.com/osipin/1/edit
For scrolling in the page body, you need to add two elements to your markup: a background for the header, and a background for the content.
The purpose of the header background is to cover up the content when it's scrolled down, where otherwise it would appear underneath the header. What you use to cover the content is simply the same background as the page. You must size this bg element correctly so that it fills the width of the viewport, and is the height of the top margin of your content area. The real header can be horizontally centered within this bg element using a set width and margin: 0 auto.
The content background element should be an empty element which precedes the content, and has a fixed position. Its purpose is to ensure that the white area extends to the bottom of the page even when the content is shorter than the viewport height.
Your new CSS looks like this:
body, .header-bg {
background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}
.wrap {
width:300px;
margin: 0 auto;
}
.header-bg {
position: fixed;
top: 0px;
left: 0;
right: 0;
height: 40px;
}
#header {
background:#aaa;
width:300px;
margin: 10px auto 0;
}
.content-bg {
background: #FFF;
position: fixed;
width: 300px;
top: 40px;
bottom: 0;
z-index: -1;
}
And your new markup like this:
<div class="wrap">
<div class="header-bg">
<div id="header">header</div>
</div>
<div class="content-bg"></div>
<div id="content">
CONTENT
</div>
</div>
Demo: http://jsbin.com/osipin/4/edit
My Objective: To have a home page, that has a fixed, static footer. The easiest way to explain this is looking at this website, http://www.foxtie.com/. I'm trying to do something like what they have done with the fox, sticking with the footer, only, I'm wanting the entire footer to not ever move from the bottom of the actual screen.
My Code: I've changed, and unchanged, and re-changed it all. So I may be 20 steps farther than I was an hour ago. Here is what I have. (Bear with me, first post here, and I'm very rusty on the html/css).
Any help is appreciated.
The HTML:
<html>
<body>
<div id="container">
<div id="nav"></div>
<div id="content"></div>
<div id="footer">
<div id="imginthefooter"></div>
</div>
</div>
</body>
</html>
The CSS:
body {
height: 100%;
margin: 0px;
}
html {
background-color: #999;
margin: 0px;
height: 100%;
}
#container {
min-height: 100%;
background-color: #666;
position: relative;
}
#content {
overflow: auto;
background-color:#333;
}
#footer {
background-color:#000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:100px;
overflow: hidden;
}
#imginthefooter {
background: url(Images/Elk.png);
width:100px;
height:300px;
z-index:300;
bottom: 0px;
top: -108px;
right: -150px;
position: relative;
}
The link that Mr. Alien provided in his comment is for sticky footers. This is useful if you want the footer to appear at the bottom of the screen regardless of the amount of content on the page. What I think that you actually want is for the footer to always appear at the bottom of the page. Meaning that if you scroll down, the footer stays in place. If this is the case, you want the following code:
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
The fixed positioning will place the footer at the bottom of the screen permanently. To add a fixed image within the footer, you will need both a relative div and absolute div. The following code is will get you what you want.
<div id="footer">
<div id="footerContainer">
<div id="imginthefooter"></div>
. . . Any additional footer elements go here . . .
</div>
</div>
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
#footerContainer {
position:relative;
width:100%;
height:100px;
}
#imginthefooter {
background: url(Images/Elk.png) no-repeat;
width:100px;
height:300px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
The relative container within the fixed element will allow you to position the elk image relative to that container.