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;
Related
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;
}
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 */
}
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.
Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
I currently have a layout as so:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
Any ideas? Cheers.
You can do this with simple display:table property.
Check this:
http://jsfiddle.net/HebB6/1/
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
display:table;
width:100%;
}
.content {
background-color: blue;
}
.header {
height: 80px;
background-color: red;
}
.footer {
height: 80px;
background-color: green;
}
.content, .header, .footer{
display:table-row;
}
original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.
*{margin:0; padding:0;}
.header{height:80px; background:salmon; position:relative; z-index:10;}
.content{background:gray; height:100%; margin-top:-80px;}
.content:before{content:''; display:block; height:80px; width:100%;}
.footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}
This is not perfect. For example, what happens when the text overflows .content is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.
This can be achived in multiple ways:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Using absolute positioning
I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/
HTML:
<html>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
}
.content {
background-color: blue;
position: absolute;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
.header {
height: 80px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer {
height: 80px;
background-color: green;
position: absolute;
top: 0;
left: 0;
right: 0;
}