I have been trying to get this my damned layout to work for so long now and its super frusterating. I am new to CSS so please be easy, but i have looked up so many articles about sticky footers and stretching content, etc etc etc, and i still can't get it to work. Min-height does nothing for me!
Here is what i want my site to look like when it doesn't have enough content to fill a page.
And this is what i want it to look like when the content makes you scroll.
Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageHeader">
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>
<div id="navigation">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./projects.html">Projects</a></li>
<li><a href="./about.html">About Me</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
<div id="main">
<div>
<h2>What the hell?</h2>
<p>
This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
</p>
</div>
<div>
<h2> Why? </h2>
<p> As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
</p>
</div>
</div>
<div id="pageFooter">
<p> This is a footer
</p>
</div>
</div>
</body>
</html>
and here is the CSS:
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* Global Styles */
html{
background: url(./images/sway.jpg);
background-attachment: fixed;
background-repeat::no-repeat;
}
body {
width: 80%;
margin: 0 auto;
}
/* pageHeader Styles */
#pageHeader{
height: 100px;
background:#999;
}
#pageHeader h1 {
padding-left: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 3.5em;
color:#F93;
}
#pageHeader p{
padding-left: 40px;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: white;
}
/* navigation Styles */
#navigation{
float:left;
width:100%;
background: #0CF;
overflow: hidden;
position: relative;
}
#navigation ul{
}
#navigation li{
float: left;
margin: 0 20px;
font-size: 1.5em;
}
#navigation li a:link {color:#F60;} /* unvisited link */
#navigation li a:visited {color:##89ABFC;} /* visited link */
#navigation li a:hover {color:#3FF;} /* mouse over link */
#navigation li a:active {color:#009;} /* selected link */
/* main Styles */
#main{
width: 80%;
margin: 0 auto;
border: 2px solid black;
background: #999;
color: #FFF;
}
/* pageFooter Styles */
#pageFooter{
height: 100px;
background:#999;
}
#pageFooter h1 {
padding-left: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 3.5em;
color:#F93;
}
#pageFooter p{
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: white;
}
What can i do to achieve this effect?
What you're looking for is a "sticky footer".
The older CSS-only way of doing this requires that you know the exact height of the footer. The best solution I was able to find through a quick Google search is Ryan Fait's Sticky Footer. Ryan's tutorial works by putting a height of 100% on a wrapper element (which contains your content except the footer). This 100% height is what makes your content push the footer to the bottom of the window, and then the footer worms its way back up into the visible area using a negative margin (which is why you need to know the height of the footer… the negative margin must be the same height as the footer element). There are a few additional pieces to make it work reliably in all browsers (like the <div class="push"></div>), but that's basically what's happening.
A newer CSS-only solution requires the use of display: table; (not supported by IE7), but allows for a variable height footer (see Sticky CSS footers: The flexible way). This is probably the method I would recommend.
The author of the second article mentions that Javascript could be used to add IE7 support, but stops short of writing the actual Javascript. At the time of this answer, StatCounter lists IE7 as having roughly 1.28% market penetration. I'll leave it to you to determine if IE7 support is important, but I'd like to add my $0.02 if I may :-p First, all users of IE7 have an upgrade path to IE8, and users who refuse to update are only making life more difficult for web developers (IE7 to IE8 open up possibilities for many important CSS2 selectors, as well as fixing many nagging float issues and making display: table; possible). In addition to making life harder for web developers, they are leaving themselves open to a multitude of browser hacks that will compromise their computer, making them an easy target for hackers looking to expand their zombie army (which makes security more difficult for everyone else). Second, Do websites need to look exactly the same in every browser? (and of course, the answer is "No") As long as having a footer on the bottom of the browser window can be considered a progressive enhancement, you shouldn't need to worry.
That being said… I updated the code so it should work in IE7 :-p Please take a look at the jsfiddle and let me know how it works.