Advanced CSS Layouts: Step by Step / Page 2

Advanced CSS Layouts: Step by Step [con't]

Fill the Left and Right Nav Bars

Let's start with the left navigation bar by adding a div with its id set to "lftBar." Since we are going to use absolute positioning, we have more freedom to choose the place where the left bar chunk of source code goes. It could go inside "level0" before or after "level1" or even at the same nesting level as "level0" before or after, and this shouldn't make any difference if we choose the right reference frame and coordinates.

At least IE5.5 has a bug that causes overlap when we try to use "level0" as our reference and top and left set to zero for "lftBar" ("lftBar" being a child of "level0" and "level0" with position property set to relative), so we have to use the body element as our reference frame and set the top and left property from "lftBar" to the same value used for the body margins.

For the right navigation bar we will also use a div with its id set to "rgtBar." The first thing to notice, is that we should insert this new div in the proper place to make its top edge coincide with the "main" content area's top edge. So we insert it inside "level2" before or after "level3," set "level2" position property to relative to use it as our reference frame and for "rgtBar" we set position to absolute, top and right to zero and its width to the same value we used for the right margin of "level3." Take a look

Visibility and Position Fixes

This version has two problems in IE for Windows. The first one is that the "Tip of the day" box disappears, although the content in the main keeps flowing as if it were still there. This rendering problem has an easy solution, we set the position property of "tipDay" to relative and we get back the proper rendering. Setting the position to relative forces the z-index higher for the tipDay div, pushing it to the front.

A Strange Inheritance: `Width` "`Auto`" vs. "`Inherit`"

The second problem for Windows IE is that the right navigation bar horizontal position is off, as far right as possible. To solve this problem we have to give "level2" (the reference for "rgtBar") a width declaration. IE doesn't understand the keyword 'auto' for this property but understands 'inherit' in a particular way (not standard) and we can exploit this on our behalf. We set "level0" width to 100% and "level2" width to inherit, the trick is that IE will inherit the value from "level0" and the rest of the browsers will inherit the value 'auto' from "level1" (the default). If we declare the width directly to 100% for "level2" we still have rendering problems (IE 5.5+ sets 100% width tables to the width of the entire browser window, thus we set width 100% only on level0). Note that you can also use the CSS parsing error IE5 bug to fix this and similar problems, see the workarounds section below for details. Take a look

Clean Some Style

It's time to do some cleaning and place other elements that will point to problems that have to be worked out. First we will get rid of "level3" and pass all its style declaration to "main." This next example has a left border for the right navigation bar using the border-right property from "main" (remember that "level3" no longer exists). We add two headers to the main and some sample content and also some headers to the right bar with some style rules. At the bottom of the right bar we have placed "A_Long_String" header to show problems with large font sizes. The text inside this element can't be broken into different lines, so it will overflow if its width exceeds the width set to the right bar. Go ahead and test it with different font sizes. Take a look

Fixed vs. Relative Sizes

To prevent this overflow problem we will change some style declarations from "rgtBar" and "main" to a value expressed in relative units as "em." We have been using a fixed 143 pixels. That would be about 9ems with the browser font size set to 12 points. One handy equivalency is 12pt = 16px. So we change now the values for width and margin-right from "rgtBar" and "main" respectively to 9em instead of 143px. By using a relative measure we have a right bar that changes its width proportionally to the user's desired font size value. Try it with large font sizes. Take a look.

Depending on the browser the user has different ways to set the desired font size. The technique described above solves overflow problems for most of the possible user interactions but not all. We set now the "Tip of the day" box width in the same way but stick to absolute units for the left navigation bar, since it doesn't have overflow problems that break the layout.

[previous] [next]