Hey guys, I've been trying to code my footer so that no matter what the height of the content is, the footer will always extend to the very bottom of the browser window. What's happening now is it cuts off at the minimum height, leaving a big white gap at the bottom if the content doesn't take up the entire window. Any suggestions?
Here's my basic page: <body> <div id="header"></div> <div id="navbar"></div> <div id="wrapper"> <div id="content"> <h1>Text</h1> </div> </div> <div id="footer"></div> <body> HTML: And here's my CSS: html, body { height: 100%; } body { margin: 0px auto; font-family: Calibri; font-size: 16px; background-color: #FFFFFF; line-height: 1.3; } #wrapper { display: table; width: 960px; margin: 0px auto; padding: 20px 0px 0px; } #header { margin: auto; min-width: 965px; max-width: 965px; height: 30px; padding: 2px 15px 0px; background-color: #CC0000; font-size: 18px; font-weight: bold; color: #FFFF00; background-image: url(../images/header.jpg); } #navbar { margin: auto; width: 100%; min-width: 1002px; max-width: 1006px; height: 30px; background-color: #0066CC; font-size: 18px; font-weight: bold; background-image: url(../images/button.jpg); } #content { float: left; width: 625px; padding-right: 15px; min-height: 300px; margin-bottom: 20px; } #footer { margin: auto; width: 100%; min-width: 965px; max-width: 965px; padding: 30px 0px 0px 0px; background-color: #0066CC; background-image: url(../images/footer.jpg); background-repeat: repeat-x; color: #FFFFFF; } HTML: What am I missing?
So basically you don't have enough content to fill up the window, but you want the footer at the bottom of the window? Then you could just position it there I suppose with position:absolute; bottom:0; Code (markup): But then there will be a white gap between the content and the footer (is this what you wanted?)
I was hoping there is a way the the footer would "stretch" itself to take up whatever space is left-over, either below the footer like my initial code or above it (between the content and footer) with the changes you've suggested. I've tried about everything I know. Certainly, there has to be a way, doesn't there?
When you say: You are saying the footer would stretch itself to take up whatever space is left over either below the footer or above it? huh? So is there 2 footers ? Are you looking for this: - If the main content and everything else does not fill up 100% of the browser window already, then the footer will take up all remaining space? ( I can't imagine why one would want to do this, but anyhow.) - This maybe could be done if it is what you are looking for , but first we need to know what is going to go in the footer, and would it be at the top in the middle or the bottom or change height etc.... Maybe you can provide a visual representation of what you want just draw up some boxes on photoshop.
No.. what he means is that the footer section might contain content that he has not estimated in the code, so if there is any way to let the footer automatcly stretch itself(and the website) to fit the content of the footer without letting it go outsite the footers borders. I really dont know how to do this, but I´ll do some research, and try and see what I can find out I know about some websites that might help you: - http://w3schools.com/css/default.asp - http://www.2createawebsite.com/design/css-tutorial.html Hope this helps
try this format <body> <div id="wrapper"> <div id="header"></div> <div id="navbar"></div> <div id="content"> <h1>Text</h1> </div> <div id="footer"></div> </div> <body> HTML:
i like this code. just like facebook layout, where the footer stay at bottom (absolute position) i think, the footer better stay at the bottom, that's why its called footer.
I'd been putting this off but I finally figured it out just as I was falling to sleep tonight since I need it done by tomorrow. So for anyone else who doesn't want to waste as much time as I did (and maybe for those who are about as equally bright as me *sarcasm*), the solution was tooooo simple: All I did was change the background color of the entire page to the footer color, then added a few extra white space <div>s to make up the differences. Worked like a charm!
Since you needed the footer to "stretch", and since this isn't actually possible with Ryan's retarded sticky footer (I'm sorry but that "push" div is called "using markup incorrectly for presentation" and you can get a good sticky footer without retarded code like <div id="push"></div> which should be banished to the 7 hells), you've done the next best thing. I use this as well: the footer's background colour is actually on the body tag and so however long the page is, you'll see the "footer's" background colour and it will fake the appearance of the footer "stretching". Good job. Though "whitespace divs" sounds suspicious, couldn't you use margins on the top of the footer?
you have a padding under the footer take that away. The page will end after the footer if it can but the padding you put padding: 30 0 0 0px puts it there, it's just a simple typo.
padding: 30 0 0 0px will be ignored, because there are no units after "30" and if there were units, they would be top padding. Agreed that it should be removed since it's wrong code.
actually if you look it's 30px 0px 0px 0px but that's irrelevant. i personally have a margin that reads 0 0 20 0px and it works. so actually know what you're talking about or don't say it.
Ah, take your own advice please : ) This page has units listed: http://stommepoes.nl/Tests/cssunits.html click on sister page, who has no units: http://stommepoes.nl/Tests/cssNOunits.html How can it work when the browser has no idea if 10 means 10px or 10em or 10p0ny? mod_p0ny!
that one unit at the end sets the unit for the rest, idk it's just the way that attribute is programmed. NICE LINKS LOL, Stomme Pos.
I tried that too, on a page I was already working on (so it had p { margin: 10 0px; } with units on the zero, which also should be ignored since nothing = nothing in all units). I still lost all margins on that p (though I checked that one only in Firefox).