This absolute but flexible trick is achieved by using percentage measurements. The position is still set to absolute, but rather than defining size and position with pixels, use percentages instead.
- Create an all container by building a div with the all ID.
The all container will hold all the contents of the page. It isn't absolutely necessary in this type of layout, but it does allow for a centering effect. - Specify the size and position of all.
I want the content of the page to be centered in the browser window, so I set its height and width to 90 percent, and its margin-left and margin-top to 5 percent. In effect, this sets the margin-right and margin-bottom to 5 percent also. These percentages refer to the all div's container element, which is the body, with the same size as the browser window. - Other percentages are in relationship to the all container.
Because all the other elements are placed inside all, the percentage values are no longer referring to the entire browser window. The widths and heights for the menu and content areas are calculated as percentages of their container, which is all. - Determine the heights.
Height is usually pretty straightforward because you don't usually have to change the margins. Remember, though, that the head accounts for 10 percent of the page space, so the height of both the menu and content needs to be 90 percent. - Figure the general widths.
In principle, the width of the menu column is 20 percent, and the content column is 80 percent. This isn't entirely accurate, though. - Compensate for margins.
You probably want some margins, or the text looks cramped. If you want 1 percent margin-left and 1 percent margin-right on the menu column, you have to set the menu's width to 18 percent to compensate for the margins. Likewise, set the content width to 78 percent to compensate for margins.