The goal is something like this:

Requirements:

The goal is a natural experience as this is a standard layout in many places. Keep that in mind if anything is not clear.

Events:

• ‘head’ has fixed heigth and notebook’s width (minus margins). Would be nice to not have to know the height before.

• notebook is resizeable and when it happens:

  • ‘main’ and ‘sett’ adapt heights to fill the notebook

  • ‘sett’ width remains the same, only ‘main’s’ width is affected

• ‘sett’s’ width can be changed by inner ‘resizeArea’ element. (not present above, usually one can dragg the vertical area between ‘main’ and ‘sett’ but how it will be done here does not matter.

Style:

• works well at least on Mac and Win

• needs to work smoothly as this is only a template for further app, perfect solution would be completely FrontEnd side but it is enough if panels’ contents are not bothered too much

• panel’s frames need to be aligned (like above)

• margins/spacings/cellmargins should be consisten or at least easy to keep them as we want.

Bonus points for:

• max/min notebook size restrictions

Wishes

The ideal answer should provide a general approach for multipanel layout that supports resizing/locking specific values and the final result is aligned nicely with adjustable margins etc.

What have you tried?

A lot… and I always ended up with a really project specific solution that needed to sacrifice few features. I lost hope for Full/Scaled ImageSize spec, in terms of expected response, respecting margins or scalability for multiple panels.

Managing image size via Dynamic ImageSize for Panes quickly escalates to not worth the effort stage. And is not stable, I can cook up and example which works well till you move the window to a secondary screen… despite the fact it only uses WindowSize.

Here is something to start with:

CreateDocument[   DynamicModule[{headerH = 50, settW = 150}   , Grid[       { { Panel@ Pane["head", Dynamic@{AbsoluteCurrentValue[{WindowSize, 1}] - 28, headerH}]         , SpanFromLeft         }       , { Panel @ Pane["main", Dynamic[AbsoluteCurrentValue[             WindowSize] - {settW + 15 + 18 + 12, headerH + 15 + 18 + 12}]]         , Panel @ Pane["sett", Dynamic[{settW, AbsoluteCurrentValue[{WindowSize, 2}] - headerH - 15 - 18 -  12}]]         }               }     , Spacings -> {0, 0}     , Alignment -> {Left, Top}     ]   , BaseStyle -> {       PanelBoxOptions -> {         FrameMargins -> 0, ImageMargins -> 5, BaseStyle -> FontSize -> 25       }     , PaneBoxOptions -> {FrameMargins -> 0, ImageMargins -> 0       , Alignment -> {Center, Center}       }     }   ] , WindowSize -> 500 , StyleDefinitions -> "Dialog.nb" , CellMargins -> {{5, 5}, {5, 5}} , CellFrameMargins -> {{0, 0}, {0, 0}} , WindowFrameElements -> All ] 

Additional reading:

• How can I make a custom resizable Pane?