cross browser height

hello, i need some quick help.

i am designing a website for a client of mine, and I am using firefox while i work to test.

look here

now, i want that center column to ALWAYS remain at 60% height, and use a scrollbar in the portion above the buttons when it needs it.

In firefox this works perfect, but in internet explorer the height seems to be automatic.

i found some fixes on google and tried them all, none seem to work. some even make firefox automatically adjust. here my css code.

/* Default Stylesheet */

															/** BODY ELEMENTS **/
body {
	color: #333;
	background: url('../images/Background.jpg') no-repeat;
	}
h1 {
	font-size: 27pt;
	color: #333;
	text-align: center;
}





															/** MAIN CONTAINERS **/
div#container {
	margin: 2em auto;
	}
	div#header {
		background-color: #CCCC99;
		border: 1px solid #999966;
		border-width: 2px 2px 2px 2px;
		}
		div#header-in {
			padding: 20px;
			text-align: center;

			}
	div#content-wrap {
		padding: 10px 0;
		}
		div.content {
			color: inherit;
			background-color: #CCCC99;
			border: 1px solid #999966;
			border-width: 2px 2px 2px 2px;

			}
			div.content-in {
				padding: 20px;
				min-height: 60%;
				height: 60% !important;
				height: 60%;
			}
			div.navigation {
				text-align: center;
				padding: 10px;
				border: 1px solid #999966;
				border-width: 2px 0 0 0;
			}
	div#footer {
		color: inherit;
		background-color: #CCCC99;
		border: 1px solid #999966;
		border-width: 2px 2px 2px 2px;
		}
		div#footer-in {
			padding: 20px;
			}

Code (markup):

 

try adding:

overflow:scroll;

to the div with 60% height. I don't know if 60% height will work anyways because cross browser wise, it doesn't normally workout the way you want. If you can use a set height in pixels, that'd be better.

 

alright, if that dosent work with both IE7and Firefox, i will use a height in pixels. thank you.