In Jitsu, we have a whole infrastructure for writing Layout Managers , which can work with CSS to provide useful layouts.

This example demonstrates the DockPanel control. Achieving a cross-browser DockPanel layout is impossible in pure CSS.

So DockPanel performs computed layout - it lays out all of the child controls using computed absolute positioning, with positions calculated via script.

DockPanel Layout

In a DockPanel, each child has an attached ("expando") property, j:dock, which is one of left, top, right, bottom, or fill. For example:

    <div j:dock="left" style="width:50px;">This is left</div>
    

To lay out children, DockPanel starts with a rectangle that is the size of the entire DockPanel. Then, it iterates over each of the children. For each child, it looks at the child's j:dock property. If the dock property is left, right top or bottom, it allocates space for that child along the specified edge of the rectangle, and then shrinks the rectangle by the appropriate amount - you can think of each child as "eating into" the rectangle along one of the four edges.

Finally, if any child has a j:dock="fill", that child is assigned whatever space is left in the rectangle.