Make background color stretch vertically in parent div

I am having trouble with making my background color stretch vertically without adding "height:400px;". Have a look at the following link to see my problem. In the body the dark blue and light blue background is not stretching automatically for me to cover the entire block. How can I resolve this? Thank you!

http://www.andersonwebdesigns.com/GarageStorageNewEngland/

@charset "utf-8";
/* CSS Document */

body {
margin:0;
padding:0;
background:url(images/bg2.jpg) repeat-x #2d83c0 fixed;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}

#wrapper {
width:1000px;
margin:0 auto;
}
#header {
height:152px;
background:url(images/header-bg.gif) repeat-x;
}
#header1 {
width:2px;
background-color:#fff;
float:left;
height:152px;
}
#header2 {
width:194px;
float:left;
height:152px;
}
#header3 {
width:802px;
float:left;
}
#header4 {
width:2px;
background-color:#fff;
float:right;
height:152px;
}

#white-breaker {
width:1000px;
height:2px;
background:#fff;
clear:both;
}

#tophead {
width:1000px;
clear:both;
}
#tophead1 {
width:2px;
background-color:#fff;
float:left;
height:400px;
}
#tophead2 {
width:691px;
height:400px;
float:left;
}
#tophead3 {
width:303px;
background:#206196;
height:400px;
float:left;
}

#main {
clear:both;
background:#206196;
}
#main1 {
width:2px;
background-color:#fff;
float:left;
height:425px;
}
#main2 {
float:left;
width:290px;
background:#206196;
}
#main2:after { content: "."; display: block; height: 0; clear: both; }

#main3 {
width:704px;
background:#99c4f1;
float:left;
height:100%;
}
#main3:after { content: "."; display: block; height: 0; clear: both; }

.clear {
clear:both;
}

#foot {
clear:both;
width:1000px;
height:207px;
}
#foot1 {
width:2px;
background-color:#fff;
float:left;
height:207px;
}
#foot2 {
width:330px;
float:left;
}
#foot3 {
width:331px;
float:left;
}
#foot4 {
width:331px;
float:left;
}

#footquotes {
clear:both;
width:1000px;
height:30px;
background:#206196;
}
#footquotes0 {
width:2px;
background-color:#fff;
float:left;
height:30px;
}
#footquotes1 {
width:330px;
float:left;
text-align:center;
font-style:italic;
color:#fff;
}
#footquotes2 {
width:335px;
float:left;
text-align:center;
font-style:italic;
color:#fff;
}
#footquotes3 {
width:331px;
float:left;
text-align:center;
font-style:italic;
color:#fff;
}

#footer {
height:90px;
width:1000px;
clear:both;
}
#footer1 {
width:2px;
background-color:#fff;
float:left;
height:90px;
}
#footer2 {
width:996px;
background:#206196;
float:left;
text-align:center;
}
#footer2, #footer2 a:link, #footer2 a:visited, #footer2 a:hover, #footer2 a:active {
color:#fff;
font-size:14px;
}