Making the Side Navigation Panel

Design goal: secondary navigation panel on the left that doesn't change width, but grows taller as the page gets longer

I want the secondary navigation panel to be flexible in a more limited way than the elements I've made so far: the buttons should always stay at the top of their area on the page, but the colored panel thay are in should grow in height along with the rest of the page.

I'll start by putting the buttons in a table:

I've made the background color transparent in the graphics, and set a background color for the table to provide the color for the panel:

I don't have any dimensions set for this table--it just shrinks around the graphics. I've cut the graphics from my master file in a size that fixes the width of the table and the spacing between the buttons.

See the navigation panel

See the problem? I've met one of my design goals--the panel doesn't change in width--but it doesn't get taller as the page content grows. I need to create a structure that will link the height of the secondary navigation panel to the height of the page's contents. And the content wraps around the panel, which I don't want.

Tables will expand along with their content, so if I place the page content and the secondary navigation panel in a table, their common container will ensure that they are always the same height. I'll remove the background color from the panel table and apply it to the cell in the outer table. That way, as the table grows because of content in the right cell, the color in the left cell will grow along with it. I'll set the vertical alignment in the cell with the panel to "top" to ensure that it is always at the top of the page, no matter how long the page gets.

All I need now is to make the cell for the page content into a "balloon" cell:

[content goes here]

See the navigation panel

And next... the sidebar.