Fix the position of Divs

Fix the position of Divs

Lengthy One, but only the explanation part.I am working in ASP.NET and the
page came out just as I wanted.But somehow, the same code in the fiddle is
not.http://jsfiddle.net/yucRt/
.logodiv
{
width:100%;
background-color:#495C6E;
height:7%;
color:white;
}
.menu
{
background-color:#335E89;
height:5%;
}
.content
{
border:1px solid #C2C8BD;
margin:0 0.6% 0.6% 0.6%;
height:84%;
border-radius:3px;
border-top:none;
padding-top:1%;
padding-left:1%;
padding-right:1.1%;
}
.panelsearch
{
width:100%;
border:1px solid red;
height:6%;
}
.panelgrid
{
width:100%;
border:1px solid red;
height:57%;
}
.paneledit
{
width:100%;
border:1px solid red;
height:34%;
}
Hence I have also uploaded the image.
All the 3 divs (with red borders) are placed inside the content div(white
border), as you can see.
WHAT I WANT (but failed to acheive):
(1). The logodiv and menudiv should be fixed with vertical scroll.
(2). The searchpanel & gridpanel should be of the height as they appear in
pic,and should not compress with lesser content.
(3). The edit panel should expand a/g to its content and so should the
ContentDiv.
WHAT I TRIED:
Put both the logodiv and menudiv inside
<div style="position:fixed;top:0"></div>.
Though it keeps them fixed, it overwrote the specified heights for those 2
divs inside, meaning, both the logodiv & menudiv are now of the same
height.
Achieved(3) by removing heights for contentdiv and editpanel and adding
overflow:hidden
for both. But if the page has no text in any of the 3 panels, all of them
compress.