Can't find a proper solution anywhere... Dont want to use explicit height on #project...

any suggestions?

here is html:

<div id="shell">
    	<div id="project">
    		<h3>awesome</h3>
            <a href="#"><img src="" /></a>
        </div><!-- project -->
        <div id="project_info">
            <h4>Project Description</h4>
            <p>blah bla blaaa</p>
        	<button>Close</button>
        </div><!-- project info -->
    </div><!-- shell -->

CSS:

#shell { height:100%; padding:0.5em 1em; background:#FFF;}

#project, #project_info { max-width:800px; margin-bottom:0.8em;}
#project_info { max-width:430px;}
#project img { max-width:100%; max-height:69%;} /* this max height does not work in FF */