Dear Julian,

Could you please tell us more about the final layout that you want so that we can find you the best solution?

Anyway, as each WebSplitterPanel is already rendered as a DIV that fit the height and width, so I guess you want to add a DIV that have 100% height of the parent WebSplitterPanel, but have a width only a fraction of the WebSplitterPanel's (e.g. 100px).

There could be 3 ways of doing it:

1. If the target DIV doesn't have any margins or borders, then the following should be fine:

<div style="float:left;width:100px;height:100%;"> div content </div>

2. But if the target DIV has margins or borders, it's total height will be greater than the actual height of its parent (a headache that WebSplitterContainer tries to solve!).  Then you can add a nested WebSplitterContainer (vertically split) to the parent WebSplitterPanel. The nested container will have two panels, the left one with PreferredSize=100, and the right one with Filled=True. The nested panels will then fit the height of the parent WebSplitterPanel.

3. You can also make use of the client API to 'listen' for the panel resize event, and resize the target DIV accordingly. (Let me know if you choose this method, I'll let you know the details then.)

Technical Support
ZettaCube Limited

Dear Julian,

There is no limit on the number of levels of nested containers.  More nesting levels (and more panels in general) need more calculations at the browser when the panels are resized. But we believe that you won't notice any delays with 4 nested containers.

Web Splitter does support master pages.  Here we built a sample app for your reference.

Sample app download: http://files.zettacube.com/MasterPageDemo.zip

In the sample app, there are one master page and two child pages.

In the master page, there is one web splitter container with two panels. The left one is used for navigation and is common across child pages.  The right one is a content panel for child pages to place custom content, so we placed a ContentPlaceHolder control in it.

In WebForm1.aspx (the first child page), we placed a web splitter container (with FitParent="FitParentContainer") in the ContentPlaceHolder. You can see that this nested splitter container will resize with its parent, which is the container defined in the master page.

WebForm2.aspx is similar to WebForm1.aspx.

Hope this helps.

Technical Support
ZettaCube Limited