Is it possible? div “menu” and “submenu” needs to be 50px tall. “top” and “bottom” needs to be 60% and 40%. The behinde-the-scene-calculation would be 60% – 50px for “top”.
<div id="menu"></div>
<div id="top">
</div>
<div id="submenu"></div>
<div id="bottom">
</div>
CSS doesn’t mix units to let you say 60% – 50px — to achieve something like this effect, you’d have to resort to JavaScript to compute the sizes.
If your div’s are directly inside , you won’t have to re-implement too much of a layout engine — at document load, get the viewport size, then compute what 60% – 50px is in pixels and assign that as the #top element height, and similarly for #bottom.