html/css header and footer not filling the whole space - html

Question

Hello I'm having a problem with my layout, when I'm resizing it, it's not filling the whole space. Please check it out here
My sample code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
p, a, h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.container {
width: 100%;
min-height: 100%;
position: relative;
}
.content {
width: 96%;
max-width: 720px;
min-width: 600px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}
.headerWrapper {
position: absolute;
height: 85px;
background: #19A347;
z-index: 9000;
width: 100%;
}
#header {
width: 960px;
margin: 0 auto;
position: relative;
}
.logo {
position: absolute;
}
.logoimg {
display: block;
width: 155px;
height: 85px;
text-indent: -9999px;
}
.globalnav {
float: right;
clear: right;
padding: 8px 8px 0 0;
display: block;
}
.nav-menu {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li {
display: inline;
}
.nav-menu a {
display: inline-block;
padding: 15px;
margin: 5px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.nav-menu a:hover {
color: #66C285;
}
#footer {
height: 245px;
background: #1c1c1c;
position: absolute;
bottom:0;
left:0;
width: 100%;
}
.cols-container {
margin: 0 auto;
max-width: 960px;
min-width: 900px;
overflow: hidden;
}
.cols-container div {
width: 20%;
float: left;
padding: 5px;
margin: 15px;
}
.heading {
font-size: 20px;
color: #fff;
background: #009933;
padding: 5px 0 5px 10px;
}
#footer li, a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
color: #999;
};
I don't know what's making it act like this way. Help is truly appreciated.

Answer 1

You should change the width between header and headerWrapper:
.headerWrapper {
position: absolute;
height: 85px;
background: #19A347;
z-index: 9000;
width: 960px;
}
#header {
width: 100%;
margin: 0 auto;
position: relative;
}
You also should change these rules:
.cols-container {
margin: 0 auto;
max-width: 960px;
min-width: 900px;
overflow: hidden;
}
.content {
width: 96%;
max-width: 720px;
min-width: 600px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}
to the min-width you want:
.cols-container {
margin: 0 auto;
max-width: 960px;
min-width: 400px;
overflow: hidden;
}
.content {
width: 96%;
max-width: 720px;
min-width: 400px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}
JSFIDDLE