Is it possible to create a footer div that sits at the bottom of a site regardless of how much information is present in the middle?
Currently the div I have is positioned depending on how much content i have in the body.
See also:
How do you get the footer to stay at the bottom of a Web page?
I am by no means a css expert, but this works for me across the major browsers:
.d_footer
{
position:fixed;
bottom:0px;
background-color: #336699;
width:100%;
text-align:center;
padding-top:5px;
padding-bottom:5px;
color:#ffffff;
}
Float the content div and have the footer div use clear: both.
I know I marked this as being answered but I've run into another problem as a result. The footer sits nicely at the bottom of the page, however, if the content goes past the footer, the footer simply floats over the content.
Is there a way to keep the footer at the bottom of the page without it overlapping if the content goes past the bottom?
My gut feel is using an iframe but Im not sure how to do it.
JonathanMueller is right, that works perfectly.
I had been looking through posts trying to do it like this. All I could find was fixed to the bottom of the window.
Thanks!
Related
I am writing a web page for my coursework, its a fairly simple page but I have noticed one problem I cant solve, and it is that the header of the site extends right to the edge of the page, but the footer and main body have a gap of white space meaning they do not stick out as far to the side. not sure how to fix this any answers are appreciated
here is a pastebin of my code if you wish to have a look, first half is css second half is html http://pastebin.com/P86dFrcE
You need to add box-sizing to the header so the width:100% includes the padding and it won't overflow the page. Also position middle is not a thing. I'd take it out and leave it as default position:relative;
more about box-sizing here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.header{
min-height: 40px;
margin-bottom: 5px;
width:100%;
box-sizing:border-box;
}
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
i have this problem.
i have this pink div at the bottom of my page
http://www.manadg.com.ar/1.png
i want the div to stay always at the bottom.
even when i resize, or when i scroll down to see the content of the page
when i resize the div moves with the bottom of the web browser´s window
but when i scroll down everything is messed up. the div is static, it stays in the same place it appears when i first enter the html.
like this
http://www.manadg.com.ar/3.png
here is my code
if anyone is able to help me, i would appreciate it.
thanks
#divbar
{
position:absolute;
bottom:0px;
width:100%;
height:50px;
background-color:#f06;
margin-left:-20px;
color:#fff;
}
and then just have the id tag with id=divbar
If I understood what you meant, you wanted a footer that stays on the bottom of the PAGE as well as the Browser window..
try this:
http://ryanfait.com/sticky-footer/
Or try changing position to:
position:fixed;
Maybe that's what you meant..
I am currently working on a website design using the 960 grid system and came across a small snag in the final moments of the design.
Ultimately, I just want to set my header and footer bars to be 'fixed' on the page, so that they will remain stationary even when the rest of the page is scrolling. Here is a great example of a fixed navigation bar.
http://ryanscherf.net/
Mine wont be vertical, but you get the point.
The problem that I am coming across is that the header works perfectly, and exactly the way I suspect it will. Here is the HTML for my header
<div id="header">
<p>
ATS Logo
</p>
</div><!--end header-->
and the css to make it stretch and fix the position
#header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}
This solution works exactly the way i want it too. However, when i apply the same exact settings to the footer, it causes undesired results.
Here is a fiddle to show what I mean. You will have to uncomment the 'position:fixed' line for the footer to see what i mean.
http://jsfiddle.net/s4cWP/
and full screen
http://jsfiddle.net/s4cWP/embedded/result/
Its worth noting that in addition to using my own css (located at the top of the jsFiddle!) i am using the 960 reset grid and 960 12 column style sheet.
I would really appreciate a push in the right direction. Is there something im not accounting for here?
Thanks!
I'm assuming you want the footer to always appear like the header: JSFiddle.
New #footer:
#footer
{
background:grey;
width:100%;
position:fixed;
bottom:0;
left:0;
}
Also, due to overlapping, I added padding to the bottom of the #container:
#container
{
padding-top:75px;
padding-bottom:30px;
}
My site's footer is showing up in the wrong place on my contact page and my blog page. All of the other pages have the footer styled correctly and in the right location. What could be causing this/what's the best way to remedy?
Add clear:both to #footer in your style sheet. That should do it.
Put a clear:both on your footer element:
#footer {
clear: both;
}
The blog and sidebar divs are floated. You need to clear out the floats on the footer for the footer to act "blocky".