jquery - HTML arrangement of splitter panes is not right until first resize -

i have 3 kendo().splitters: first vertical, dividing top 10% of screen bottom 90%. then, inside upper pane have horizontal splitter splits left 25% of screen rest; , in lower pane, have horizontal splitter splits left 25% of screen rest. end result 4 panes, top left 10% high , 25% wide, top right 10% high , 75% wide, bottom left 90% high , 25% wide, , bottom right 90% high , 75% wide.

i don't know splitters have problem, when page first comes up, not line up. upper pane split, like, 23%/77% while lower pane split 25%/75%. 2 vertical bars not line up. first resize action take (with mouse) causes panes "snap" position where, now, line up.

so, question is, how best done cause (otherwise) finally-rendered page 1 more recalculation of parts? assuming happens when resize page. have $(document).ready(function( ), there should add in there?

my environment i.e. 9, telerik controls, mvc4-razor.