Post | mennovanslooten.nl/blog

A while ago I figured out a method to define the layout of webapplications in CSS. My objective was: it had to be panel-based (you always need to see all available panels), it needed to scale well and had to work in different browsers.

After much expirimentation I found that tables were useless. I could not get them to overflow correctly in different browsers. Further expirmentation lead me to the most flexible setup: define both position and size in percentages.

Method no. 1

The idea is as simple as it is flexible: One panel is 100% x 100% by default. If you combine two panels horizontally they have to divide that 100% horizontally. If the first is a% wide, the second is (100 - a)% wide and starts a% from the left. Three panels? The first is a%, the second b% and starts at a% from the left, the third is (100 - a - b)% and starts at (a + b)%.

OK, it may not sound simple, but once you see it in action it should become clear. (The effect becomes more obvious when resizing the browser)

The beauty? Well it's extendible (so you can group any number of panels horizontally and vertically) and nestable (so you can use sets of panels inside panels) so you can pile as many panels together as you need. It uses only the most basic of CSS properties (left, top, width and height) so is guaranteed to work in practically any browser.

So what's the catch? Well, everything has to be flexible in every way. There's no room for absolute units like pixels. Everything will allways grow and shrink with the browser.

Method no. 2

However, if we let go of the extensibility factor we can come up with another solution. Here we use the following principle: With each set of panels (horizontally or vertically) there is one that is completely flexible. All others are fixed.

How do we do this? The flexible panel actually takes up all available space horizontally and vertically. The content, however, is pushed to the center using borders. We have to use borders since they will influence the absolute positioning inside their panel. Using this principle most common application layouts can be realized.

Contrary to the first method, here panels actually lay on top of each other. This means that the flexible panel of a set has to be defined first in the HTML, so the others can lay on top. This is usually not a big problem and if it is it can be solved using the z-index. I personally prefer method 1 because of its simple elegance. Because layouts are achieved so easily using this method it gives you more time to get a little wild with the rest of the look-and-feel!