Tutorial 24: Fixing Frames with Fixed Positioning
|
| ||||
| ||||
|
|
Ems and percentages don't mix
One solution is to fiddle with the values of the width property for the two columns until they fit. However, it's impossible to come up with something that would work with all possible viewport sizes. You see, the problem is that we're adding the proverbial apples and oranges here. You can't just add percentages (which are relative to the viewport width) and ems (which are relative to the font size, but you could have used an absolute unit such as inches instead with similar results) and predict what the result will be.
Another possible solution is to drop the percentages and use ems everywhere. This, however, will cause problems because your layout will not resize with the viewport. So if the reader's viewport is smaller than the total width of your boxes, part of your page will be invisible, while if it is larger, the page will only occupy part of it, leaving a potentially huge bit of screen real-estate unutilized.
Another way out of this situation is to use percentages for everything, but this is not necessarily a good idea, since it's unnecessarily constraining. In actual fact, ems are a very good unit of measurement since a user's font size is generally a good indication of how large he likes things to be. If the user is like me and likes his windows big and his screens even bigger, a border width that is, say, 1% of the viewport width will look very thick. Some poor guy with a Cold War era 14" monitor that doesn't do more than 640x480 pixels, on the other hand, might see it as a tiny little line. You will also have other problems with other measurements: If you have a vertical border with a width of 1%, and you want a horizontal border of the same width, how would you achieve it?
In addition to the above problem, avoiding the width property has another advantage: Navigator 4.x and Internet Explorer will ignore the top, left, right and bottom properties on the elements since, in their twisted minds, these elements are not positioned (because they don't understand fixed positioning). The result is that these elements will be part of the normal flow and will be shown in their normal place. This allows us to use this technique and be friendly to users of these buggy browsers.
The above holds true for horizontal measurements using width, left and right. The situation is slightly different when we're setting vertical measurements. In this case, you usually can't do without the height property. In the example below, I've used an absolute height value (measured in ems) for the two sections that need this. These sections are special, since I've constrained their height, but also their size, so that they will always fit into their height. This avoids problems with buggy browsers since this value of height makes sense whether these elements are positioned or not.
