User:Wvengen@nikhef.nl/Web design:Flexible layout

While CSS and XHTML have brought much goodness, it can still be troublesome to create certain page layouts. One such thing is page-filling web applications that need to scale to the browser size.

In GUI toolkits (like GTK, Swing and many more) there is the concept of layout containers, which distribute the available space over its children according to preferred sizes and min/max criteria, among others. Currently it is not easily possible to do this in HTML/CSS. When CSS3's calc() arrives, there may be a clean solution, but for now, we have to resort to other means.

I'll be focussing the discussion on height, since that's what I needed, but this equally applies to widths. One can use min-height and max-height to specify size boundaries. For example, one could set min-height: 5ex to make sure that a number of lines can be shown in the box, but limit it to half of the available screen space using max-height: 50% (with a containing box of 100% in height).

Now a problem arises to make another box fill the remaining height, since the exact size of the previous box isn't known. This cannot be solved in CSS, so my solution is to give it a 'decent' initial size (say, height of 50%), and then resize it in Javascript to completely fill remaining height. This is done by

Please find the skeleton page here.