I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div
div.footer {
position:absolute;
bottom:0px;
}
Does anybody knows how can I fix this? Thank you
UPDATE:
This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.
The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.
UPDATE II
My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.
What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.
Checkout CSS Sticky Footer for an excellent cross-browser compatible method.
What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.
You can add a push div to the last element before the footer in order to always assure that the footer doesn't overlap the content.
Given this example:
<html>
<body>
<div class="header" />
<div class="content" />
<div class="footer_push" />
<div class="footer" />
</body>
</html>
If <div class="footer" /> is always 75px high, use the following CSS:
html, body { height: 100%; } /* Take all available vertical space */
/* Push the bottom of the page 75px.
This will not make scrollbars appear
if the content fits already. */
.footer_push { height: 75px; }
/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }
Basically you need to give the footer a fixed height and to push the footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:
The html and body must besides having a height of 100% no (default) margin to avoid the footer being pushed further to below that amount of margin.
The p and div elements throughout the page must have no margin-top to avoid the footer being pushed further to below that amount of top-margins in under each Firefox.
The "container" div must use min-height of 100% instead of height to avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-height just works fine with height, so you'll need to add a * html hack for this.
All with all, here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>SO question 1900813</title>
<style>
html, body {
margin: 0;
height: 100%;
}
p, div {
margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is actually "min-height" for IE6 and older. */
}
#pushfooter {
height: 50px; /* Must be the same as footer height. */
}
#footer {
position: absolute;
bottom: 0;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<p>Some content</p>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Edit: after more testing I realized that this indeed does not work in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unless you let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head> (which I already added to the SSCCE here above):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or to let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype> or pick one of the doctypes associated with painfully red Q boxes in IE here). But I wouldn't do that, that has more negative side-effects as well.
And, surprisingly, the http://www.cssstickyfooter.com site as someone else here mentioned here which used an entirely different approach also did not work in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.
Try setting the footers Position to relative and playing around with a negative top margin to get it how you want it.
What you're looking for is a Sticky Footer, you can find a lot of resources like this one: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
try this:
#wpr{
display: table;
height: 100%;
width: 100%;
}
.dsp-tr{
display: table-row;
}
.dsp-tc{
display: table-cell;
}
#ftr-cnr{
text-align: center;
vertical-align: middle;
}
#ftr{
background-color: red;
padding: 10px 0px;
font-size: 24px;
}
<div id="wpr">
<div class="dsp-tr">
<div class="dsp-tc">
body
</div>
</div>
<div class="dsp-tr">
<div class="dsp-tc" id="ftr-cnr">
<div id="ftr">
footer
</div>
</div>
</div>
</div>
display: table does not make it a table, a <div> is still a <div>, it just tells the browser to display it as table.
i tested it in chrome and firefox
let me know if it works for you.
We had this problem a few times. We could not find any cross browser CSS only solution. We finally resorted to JQuery. We wrote our own (i can't publish) but this one http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm looks promising:
$(function(){
positionFooter();
function positionFooter(){
if($(document.body).height() < $(window).height()){
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
Do you have a DOCTYPE declaration in the top of your HTML?
If so, there is a good chance I have a solution for you.
I was trying to do a height:100% table or div (assuming this is a basic cornerstone to the expanding footer feature)
No matter what I did, the 100% height didn't work! the elements just didn't stretch...
I narrowed it down to a very basic HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
but the DIV didn't stretch all the way down (the 100% was ignored). This was true also for tables with plain height="100%" attribute.
As a desperate last result guess, I removed the DOCTYPE row, resulting in this code
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
And it worked!
I'm sure there is a good explanation, but I really didn't care since it solved the problem
Update
See related question (asked by me)
Depends on what you want to do. I you want it to be always visible on the bottom of your screen, you should use
div.footer{
position: fixed;
bottom: 0;
}
Be sure to get some padding on the bottom of your body (or container, so that people can actually scroll to the bottom of the text). The main problem here is that when resizing everything it will overlap.
If you just want to have a footer that has a background-image / colour that stretches all the way till the end (for pages that are not fullpage height) you could try to use a faux column principle or even try to give your body the background colour of your footer and fix the header / content background.
Today I stumbled across this page:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
Could be helpfull
I came up with a fairly simple solution that doesn't use any CSS height hacks or any of that.
You just set your <body> with the background you want the footer to have, and then put everything besides the footer in a <div> with the properties you would normally give to the body tag.
This gets the footer to "extend" its color to the bottom of the page when there is short dynamic content without expanding it needlessly when there is a lot of dynamic content. The "virtual body" div can still have a gradient followed by a solid color, and the footer's background is hiding in the body tag, only showing up on short pages. (Works great if you need a solid color to continue after your footer gradient ends, or if you just need the background to match the footer color)
CSS
body {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }
HTML
<body>
<div id="primary_container">
<!-- most content, can be short or long -->
</div>
<div id="footer">
<!-- if primary content + footer is less than browser height, body background color
displays below this. If it is more, you get normal scroll behavior to the end
of footer and body background color is never seen -->
</div>
</body>
Related
I'm laying out a website design and I have run into an error...
The html element is assigned a fixed width of 800px, the body element ID 'page' will not take up 100% width no matter what I try?
Heres the code...
<html>
<body id="page" >
/ content /
</body>
</html>
html {
width: 800px;
margin:0;
padding:0;
}
#page {
}
I have tried setting the #page to 'width:800px', 'width:100%', 'margin:0', 'margin:0 auto', etc. but no matter what there is always a 1px gap on the right side of #page. I've even tried setting 'width:801px' which didn't work, as well as setting the relative position left 1px in case it was overflowing left for some reason, but it's not...
Am I missing something stupid, is the program I am using buggy, or is it something else? Where I am from, 800px is the same as 800px so what's going on?
Thanks guys....
EDIT:
So, going back through previous projects I discovered what works for me. Whether it be the program I am using(free), or just something I'm missing this is what works for me and so resolves my issue.
<html>
<body>
/ content /
</body>
</html>
html {
width: 800px;
}
body {
margin: 0;
}
There's probably some extra css sneaking in somewhere. Check for any border property on your #page element.
Run this snippet, and there shouldn't be a single pixel gap.
html {
width: 800px;
background: lightgrey;
}
#page {
margin: 0;
border: none;
background: yellow;
}
<html>
<body id="page">
/ content /
</body>
</html>
it appears you are running into an inconsistency problem in the way browsers inject scrollbars into the page, see here:
Styling the `<html>` element in CSS?
I would start by using a css reset like normalize.css to get cross-browser consistency in behaviour then use your custom styles from there. Personally I never style the html element and work from the body down. Working like that I dont encounter these kinds of problems becuase they are dealt with by normalize.css.
I have trouble to create a page with full screen div with h1 element.
Following page is rendered correctly by IE and Chrome as expected: Contains Red full-screen div, no scroll-bars:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>title</title>
<style>
html {
background-color: purple;
}
body {
background-color: blue;
height: 100%;
margin: 0;
}
#main {
background-color: red;
min-height: 100%;
}
</style>
</head>
<body>
<div id="main">
<h1>
some text
</h1>
</div>
</body>
</html>
But, for the Firefox (27.0.1) I found:
show purple line at the top of the page
and vertical scroll-bar
if I add some text directly to #main div before h1 element, then page renders as expected.
What I should do to render it correctly in FireFox with text in h1 only ?
Following page is rendered correctly by IE and Chrome as expected: Contains Red full-screen div
If that’s what you get, then that can only be in Quirks Mode, I suppose – because you forgot to set height:100% for html as well, and without that the percentage height for body is not supposed to work that way.
And with a correct Doctype set (and height for html), you get the same result in all standards conform browser – the one you think is wrong: http://jsfiddle.net/q6g8Q/1/
It’s actually correct though, because of adjoining margins – the default margin-top from the browser stylesheet for the h1 adjoins the margin-top of the div – and therefor it gets pushed down accordingly.
So set the margin-top of the h1 to zero, and the “problem” is gone – http://jsfiddle.net/q6g8Q/2/
You have to reset the css of your browser. Just add this to the top of your css :
* {
margin: 0;
padding: 0;
}
// #main h1 { margin:0; } // this snippet will be enough for your case, but with the other you remove every margin and padding made by the browser.
demo JsFiddle
If you want more info about this tricks, read this article by Chris Coyier.
If you want a full css reset, you should consider the Reset Reloaded.
change the line-height or margin padding. That should do the trick. play around with some big numbers ;)
I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?
Thanks
EDIT: Let me clarify based on the answers:
I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.
I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.
I just ran into the same circumstance as you do.
After a little experiment I found that it is caused by the wrong value the CSS property 'position'.
When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.
This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.
html, body { overflow-x: hidden; }
Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.
<html>
<head>
<style>
#test {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
background-position: 50% 50%;
overflow: none;
z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>
Here's some other stuff in the body of the page.
<div>
and some stuff in a div in the body of the page.
</div>
</body>
</html>
I feel like this is an easy question, but for whatever reason I can't figure it out today.
I need a div that always fills the entire page, no matter how large that page is. Then I need another div which I can re-size with javascript (mydiv.style.width = x; mydiv.style.height = y;).
If the second div is resized to be taller than the existing browser window height, the first div should resize to fit.
i.e. If the first div's background color is red, I should never see any white background color, because the first div always expands to the size of the entire page.
I tried this, it doesn't work because the red background doesn't expand to the size of the entire page:
example of the problem
I think Zack's alternate is the best answer: the body element IS a block-level element that always fills the entire 'page'. You can hook into it with JavaScript and CSS, just as you can with a div. Color your body element red and you'll never see white if your inner div is resized. If you don't want your CSS applied to every page in your site, add a class or ID to the body of the page you want to affect, and write your CSS to select only body elements with a specific class or ID.
Am I missing a requirement that's not addressed by using the body element?
I keep getting blasted by the CSS purists for this, but I recently solved this problem by using a table.
You need an outer div, set to "position:relative" and 100% height, and then you put a table inside, also 100% each way.
More explanation here: http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html
You're welcome to spurn the table solution. But then I can't help you.
how about something like this?
if (wholePageDiv.style.height < myDiv.style.height) {
wholePageDiv.style.height = myDiv.style.height + 10
}
An alternative -- if that background div only needs to be a color -- is to just set the body's background-color to whatever you need. Then you don't need to worry about any javascript resizing of the background.
Holy crap ive solved it, a FULLY CENTERED DIV, enjoy.
EDIT: minor cosmetic fix
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
body {text-align: center;}
p {width: 300px;}
.greenBorder {border: 1px solid green;}
.wrapperA { display: table; width: 1px; height: 1px; margin: 0 auto;}
.wrapperB { display: table-cell; #position: absolute; #top: 50%; vertical-align: middle;}
.wrapperC { #position: relative; #top: -50%;}
</style>
<script language="JavaScript" type="text/javascript">
function resize(id) {
var block = document.getElementById(id);
var htmlheight = document.body.parentNode.scrollHeight;
if (htmlheight > window.innerHeight) {htmlheight = window.innerHeight;}
block.style.height = htmlheight + "px";}
</script>
</head>
<body onload="resize('wrapper')" onresize="resize('wrapper')">
<div class="wrapperA greenBorder" id="wrapper">
<div class="wrapperB greenBorder">
<div class="wrapperC greenBorder">
<p>CENTERED CONTENT</p>
</div>
</div>
</div>
</body>
</html>
I have a layout with a menu DIV on the left. This is floated left with a fixed EM width. I then have a content DIV which has a left margin of more than the menu's width. So it sits nicely to the right of the menu and fills up the remaining space with both menu and content lined up perfectly.
However, in Internet Explorer 6, if the content gets too wide it falls down below the menu. which means you have loads of whitespace and can't actually see any of the content at all without scrolling.
Unfortunately I am not able to make changes to the content - this is a redesign of a site hosting 3rd party content, and changing that content is outside the scope of what I can do.
Also, there is a footer bar that must be underneath both the menu and the content.
I managed to almost get it to work by providing IE6 with a different layout using absolute positioning - unfortunately the footer looks rubbish and as IE6 is the 2nd most used browser on our site I can't really go with that.
I also tried messing around with overflows but ended up causing problems with random scrollbars appearing all over the place which wasn't any good either.
Does anyone know if there is a simple non-Javascript way of doing this that will work in IE6 as well as "proper" browsers? I'm currently thinking that it will have to be a table based layout.
Here's an example of the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu {
width: 14em;
float: left;
}
.content {
margin-left: 15em;
zoom: 1;
}
.footer {
clear: both;
}
/* styling to make the demo more obvious */
.menu {
background-color: #f99;
}
.content {
background-color: #9f9;
}
.footer {
background-color: #99f;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="content">
<h1>Main Content</h1>
<table>
<tr>
<td>this is a really</td>
<td>wide table which</td>
<td>I am using to push</td>
<td>the content down</td>
<td>need to keep going</td>
<td>so that it breaks</td>
<td>in ie6</td>
<td>but naturally</td>
<td>nothing else</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<p>Copyright blah blah blah</p>
</div>
</body>
</html>
As you mentioned you already tried position absolute. But I'll tried the following and it might work for you. Here is the CSS:
.container {
position:relative;
}
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0 !important;
left: -15em;
}
.content {
margin-left: 15em;
}
.footer {
}
Some explanation: The menu is positioned absolute, independent of the other content. However, IE puts the menu relative to the "content" div, and hides it behind the "content" div. The work around is to position it negatively, just as many em's to the left as the content div has "margin-left". But this should only done for IE, so therefor the "left 0 !important" is added (but before the negative left), which works because IE ignores "!important" while the other browers do acknowledge it and will use "left 0".
Update:
As Alohci notes a better way would be to use the "* html" hack, in that case the CSS for "menu" becomes:
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0;
}
* html .menu {
left: -15em;
}
Why not use an established layout for eg http://layouts.ironmyers.com/
or you might want to investigate this css overflow
Have a look at this, does it help?
EDIT:
Try one of these fixes:
(you could use some conditional code like #Blake suggested)
overflow:scroll -- this makes sure your content can be seen at the cost of design (scrollbars are ugly)
overflow:hidden -- just cuts off any overflow. It means people can't read the content though.
.content {
margin-left: 15em;
zoom: 1;
overflow:scroll
/* overflow:hidden */ /* probably second best */
}
Try looking at this one How to prevent long words from breaking my div? is this your problem?
Use some conditional comments for IE6 to read and place in the necessary CSS to fix the width of the problematic divs like so:
<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->
You can read more on the conditional comments here.
Removing the zoom: 1;
makes it work just fine for me in IE6.
Too late, but usually i get flots fixed by adding or an absolute width (a number in pixels, points or any hard measure system instead on em, % and so) or sometimes to put a min-width property solves it, also, beware of padding and borders because of the boxmodel sum.
I have run into this so many times that I just try to stay away from floats entirely. That said, there are some things you can do to make them work, but you might have to settle for a fixed with layout and/or some IE6 specific fixes. Here are some things you can try:
This may sound like heresy but
tables are not wrong for layout,
they're just not cool.
Try setting the 'container' div with
a fixed width and auto margins.
If that doesn't work, try a fixed
width 'content' div with your fixed
width 'container' div.
THanks for the position:absolute idea. This is similar to one solution I almost went with.
The problem here is that the menu will overlay the footer if the menu is longer than the content (and it quite often is). I could try to add an arbitrary height to the content to try to force a minimum height, but I won't really know how big the menu will be. There's the potential for quite a lot going down the side panel in that area.
I presume there's no way to force the relative positioned container to grow in response to the absolute positioned content, is there? Even if it's an IE6 hack, as I can use the float method for other browsers.
(Again, sorry for not posting this as a comment but I don't get that as an option)