Ok, here goes. http://tueproductions.com Ok, 2 problems here. 1) First and foremost, the footer doesn't reach the bottom of the page. Here is the associated code: The PHP file: <div id="wrapper"> <div id="header" /> <div id="navbar"> <?php include("content/navbar.php"); ?> </div> <div id="content"> <?php $page = $_GET["page"]; if(!file_exists('content/'.$page.'.php') || $page == null) include("content/mission.php"); else include("content/".$page.".php"); ?> [B] <div id="footer"> <?php include("content/copyright.php"); ?> </div> [/B] </div> </div> Code (markup): CSS File: div#wrapper { postion: relative; border: 1px #000 solid; border-bottom: 0; border-top: 0; background-color: #ccd3bb; text-align: left; width: 800px; margin-left: auto; margin-right: auto; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height: 100%; /* real browsers */ } div#footer { position:absolute; width: 100%; bottom: 0; z-index: 1; } div#footer p { padding:1em; margin:0; } Code (markup): I've tried everything, and it still won't work! Why isn't bottom working? Thanks for any help in advance.
I'm not in a very helpful mood this morning, so I won't bother doing it for you, but this should help: http://ryanfait.com/sticky-footer/
Um might want to state which version of FF and what OS. On windows with FF2, it does go to the bottom, too far to the bottom but it does. Same for IE6. I see nothing in the footer declaration which would make it go to the right. Not sure if you mean the text or the footer div.
Ok, well I got the bottom to work, but why won't 100% height work on the middle container (the blue one)?
You might want to google "height: 100%" css because there are some issues with this one. Modern browsers will always have trouble adding something to 100%. So if you were to make a box 100% high, then you have something coming after it, where can it go? I make you eat 100% of a candy bar and then demand you eat more of that same candy bar. Tasty, but only possible with IE6 and below (and IE7 in quirks mode I'm sure). In IE6, there is no min-height, as you know cause I see a funky hack for it in your code, but 100% can always get bigger somehow in IE6. Redmond math, I guess. BTW, here's the lazy version of height setting: #wrapper { min-height: 100%; } * html #wrapper { /*let IE6 */ height: 100%; } Second, you can make the body and html elements 100% high. You can make a direct child of them 100% high. Now I heard a crusty say if you have a parent without height, then any child inside who is set to height: 100% will instead go to height: auto (the height of whatever content is inside) which makes sense, but I've seen pages where every parent does have a height set (to 100%) and this doesn't work either. Boxes just don't go to 100% of whatever's there. Instead, most of us have to fake it with background-colour tricks and Faux Columns and the such (they're not just for floats!). The best you can do is go with a 100% height model for the page, and set the blue as a background colour for the wrapper, and let that colour show through the middle part, making it look like it stretches to the footer. Some people might say "Use a table." Just so you know, tables actually never validly had height: 100% either. *edit This is just goofy: div#footer { float: left; position: relative; height: 50px; bottom: 0; z-index: 1;<-- why? text-align: right; float: left;<--wha? } Instead, take the footer out of the #wrapper and just have it come afterwards. Now this alone would be a problem as Wrapper's 100% high, but what you then do is pull the footer up over the top with margin-top: -50px; Keep position: relative, but lose the z-index, float(s), and bottom: 0 as they're not needed. If keeping the footer at the bottom at all times is the goal, this will do it. Then you can do the trick with making the middle part look like it's stretching from the top to the footer of the screen.
Tried what you said, didn't work. Now I have extra room. The z-indexes are there for a reason (the navbar floats over the header), but for some fucking reason CSS is bullshit when it comes to 100% height. Sorry for the language, but I've been working on this for days!
Ah thank you. I got it working eventually. But new problem now....http://tueproductions.com/?page=bio&name=sam Why in Firefox will the wrapper end?
Shouldn't matter. How can a parent sit over a child? No need for z-indeces (but I'm not going to tell you to take them out if you want them, they're not harming anything). You are absolutley right, CSS is very bad at 100% height. It was designed flawed in my opinion. I don't see any difference between my ratty old FF1.5 and my Fake IE6 4 Linux... screenshot? You still have the wrapper at min-height: 100%, and then the footer is coming afterwards (if I'm reading your HTML correctly). Remember it's not a good idea to try to add anything to 100%.