Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 171

padding-left: 1em; /* LC left padding */
}
#Books {
width: 15em; /* RC width */
padding-right: 1em; /* RC right padding */
padding-left: 1em; /* RC left padding */
}
/* Calculated Values */
body {
padding-left: 11em; /* LC width + LC right padding
+ LC left padding */
padding-right: 22em; /* RC width + RC right padding
+ RC left padding + CC left padding
+ CC right padding */
min-width: 15em; /* LC width + LC right padding
+ LC left padding + CC left padding
+ CC right padding */
}
#Pages {
right: 15em; /* LC width + LC right padding
+ LC left padding
+ CC left padding + CC right padding */
}
IE 6 has some problems with this technique. To work around them, we add this rule:
html #left {
left: 17em; /* RC width + RC right padding + RC left padding*/
}
What's especially annoying about this technique is that it's very easy to get the widths a little off. They are
calculated based on each other, but they are defined as static constants in the CSS file. However, once you get
this right, it does work, and it works reasonably well across modern browsers.