I have tried everything! I simply cannot get my website to look the way i want it to.
Here is the HTML
<!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">
<ol>
<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>
</ol>
</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:
/* CSS Document */
/* CSS Reset*/
/* 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;
height: 100%;
}
body{
margin: 0 auto;
padding-left: 0px;
background: #3ee; /*<-------------- problem here bro */
font-family:"Times New Roman", Times, serif;
font-size: 1em;
color: white;
}
#pageheader, #pageFooter {
float:left;
min-width:100%;
}
/*Header Styles*/
#pageHeader{
padding: 30px;
font-size: 3em;
font-family::"Arial Black", Gadget, sans-serif;
background-color: #0F6;
}
#pageHeader p{
padding: 1px;
font-size: .5em;
font-family::"Arial Black", Gadget, sans-serif;
}
/*Body Styles*/
/*Navigation styles */
#navigation{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
float: left;
background-color: #C09;
position: inherit;
}
#navigation li{
float: left;
padding: 20px;
}
#navigation a:hover{
color: #91BED4;
}
/* Main Content */
#main{
min-height: 100%;
width: 60%;
margin: 0 auto;
background:#F00;
clear: both;
color: #FFF
}
/* Footer */
#pageFooter{
height: 150px;
background: #00F;
color:#CF0;
font-size: 2em;
/*position:fixed;
bottom:0;*/
}
As you can see i color coded the different sections in order to see what is being affected by what. For some reason the navigations div color isnt showing up and instead it is taking on the color of the body. I want this page to have a header and footer which extends to fill the screens witdh and a main content block that has a minimum height of the screen size but the min-height specification just isnt working.
What can i do to fix this? What are some useful techniques for what i am trying to do? I am new to CSS and any advice is useful!
Here is what the website looks like: http://imgur.com/OIuad
I just cant seem to get the red box to have a minimum height of the screen.