cant get min height to set as a percentage

[barrowvian]

this is the current css style i have at the moment;

@charset "UTF-8";
/* 
Background-Styles 
*/

body {
margin:0px; padding:0px;
background-color:#01398e;/* very bottom of the page*/
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
#main {
background:#e3e8f1 url(images/background_light_slice.jpg) repeat-x; /*main body colour, plus image for top main section*/
padding-bottom:5px;
}
#main .container {
background-image:url(images/background_light.jpg); 
background-repeat:no-repeat;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
padding-top:20px;
padding-left:40px;
padding-right:40px;
padding-bottom:0px;
position:relative;
top:-10px;
}
.container {
width:950px;
margin:0 auto;
position:relative;
}


/* 
Header-Styles 
*/

#header {
padding-top:20px;
padding-bottom:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
/*background-image:url(images/logo.png);*/
background-repeat:no-repeat;
width:300px;
height:100px;
}
ul#menu {
margin:0px;
padding:0px;
position:absolute;
right:233px;
height: 23px;
width: 335px;
}
ul#menu2 {
margin:0px;
padding:0px;
position:absolute;
right:233px;
height: 23px;
width: 500px;
}
ul#menu3 {
background-image:url(images/logo.png);
background-repeat:no-repeat;
margin:0px;
padding:0px;
position:absolute;
left:0px;
height: 115px;
width: 515px;
top: 15px;

}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#01398e;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
text-decoration:underline;
}

/* 2nd menu */
ul#menu2 {
margin:0px;
padding:0px;
position:absolute;
right:-2px;
height: 33px;
width: 230px;
top: 16px;
text-align: right;
}
ul#menu2 li {
display:inline;
margin-left:12px;
}
ul#menu2 li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu2 li a.active, ul#menu li a:hover {
color:#211e1e;
}

/* 
Block-Styles 
*/

.block {
border:1px solid #01398e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
/* min-height: 460px; */
}
.block_inside { 
display:block; 
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;	
padding:30px;
overflow:auto;
}

.text_block {
float:left;
width:100%;
margin-left:0px;
padding-top:0px;
}

/*
Block-Content-Styles
*/

#content_area {
width:665px;
float:left;
}
#content_area .block_inside {
min-height:400px;
}

#content_area h2 { font-size:32px; line-height:31px; }

#content_area .separator {
border-top:1px solid #e3e3e3;
margin-top:40px;
padding-top:40px;
}


/* 
Text-Styles   
*/
h1 {
margin:10px 0px 5px 0px;
font-size:14px;
line-height:21px;
font-family:Helvetica, Arial, Sans-serif;
color:#7f7d78;
text-align:center;
}

h2 {
margin:0px 0px 10px 0px;
font-size:24px;
font-family:Helvetica, Arial, Sans-serif;
color:#01398e;
line-height:39px;
letter-spacing:-1px;
}
h3 {
margin:10px 0px 5px 0px;
font-size:14px;
line-height:21px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}

h4 {
color:#007de2;
margin:0px 0px 0px 0px;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#26689f;
text-decoration:none;
}
small a {
color:#007de2;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

/*
Footer-Styles
*/

#footer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

#footer .long {
width:100%;
}
#footer h3 {
color:#e2dddc;
text-transform:uppercase;
font-size:10px;
}

/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }

 

As you can see in the block section I have set the min height;

.block {
border:1px solid #01398e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
/* min-height: 460px; */
}

 

Yes I know its commented out at the moment When I change the px value it updates accordingly, but if there is hardly any information on the page the block obviously doesnt fill the users browser. How would I go about changing it to a percentage correctly (100%). Ive already tried just changing it to 100% but nothing happens.

 

 

[haku]

As a suggestion, it generally helps to actually state what the problem is, and ask a question.

 

Seeing as you only gave the situation, and not the other two pieces, I'm having to make a guess, but I'm guessing that this can help you: http://www.cssstickyfooter.com/