Making the Sidebar

Design goal: sidebar of a fixed width on the right which grows taller as its content expands

By now you've probably guessed that the sidebar is going to be a table of some kind. So here it is:

To create a 1-pixel border, I've nested my table into another, one-celled table with a dark background. By setting the outer table's cell pad to 1, I get a 1 pixel border. This will display identically in Explorer and Netscape. My design goal is a table of a fixed width, which will grow taller as neccessary. I don't have to do anything special to make the table expand vertically, but I do have to use some other method than the percentage width that I've been using so far to hold it to a specific size. I'll try exploiting the tendency that tables have to collapse around their content by inserting a 1 X 1 pixel transparent GIF file, and use the image's "width" attribute to establish the width I want for the table:

I've sized the width of the spacer GIF to 150 pixels, and removed completely the table's width attribute. The table shrinks to the size that I want. This time, I've put the GIF in the second row of the table so that the extra height will be less noticable, but I could have used a single-celled table and put it in the same cell as the content. I'll remove the table borders, set the cell space and cell pad to zero, and add some content:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. feugait nulla facilisi.

Oops! The transparent GIF kept the table from shrinking when it was empty, but as soon as I added some content it expanded. I'll need to find a way to limit its width. I can try setting the width of the table to 150 pixels, but in my experience tables don't always stay at the width you specify when displayed in the browser.

"Balloon" cell to the rescue again! I'll split the right column of the content table and add the sidebar to the right cell:

< "balloon" cell >

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. feugait nulla facilisi.

Just as it does with the secondary navigation panel, the "balloon" cell pushes against the column with the nested sidebar, but the spacer GIF stops it from collapsing completely.

The text in the sidebar looks cramped because it goes right to the edge to the table. I can adjust the cell pad to give it some breathing room:

< "balloon" cell >

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. feugait nulla facilisi.

See the sidebar

The page now meets all of my design goals, but the text in the content area needs some space around it, and I don't like the way the sidebar sits flush with the right edge of the window and the button bar. I added breathing room for the text in the sidebar by adding some cell pad for the table it is in, but if I do the same for the entire content-area table, the secondary navigation panel becomes too wide:

< "balloon" cell >

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. feugait nulla facilisi.

I want to create a margin for the content and the sidebar, but not the secondary navigation panel. I'll create a nested table for the content and the sidebar so that I can adjust the cell pad for those two elements separately without changing the spacing around the secondary navigation panel (I've merged the middle and right columns of the first table to hold this nested table):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. feugait nulla facilisi.

See the sidebar

Some finishing touches: I made a text navigation bar at the bottom of the page and a few placeholder graphics to give a better idea of how the page will look. For the text navigation bar, I used the same table structure as the graphic button bar, so its behavior should be the same when the window is resized:

HOME PRODUCTS ORDER CONTACT

In my earlier graphic button bar, the left cell of the outer table held a graphic that made up part of the visual design of the page, and it also served to keep the "balloon" cell from filling the table completely. I don't need a graphic in my text version of the button bar, but since I am reusing the same table structure I do need something to serve the same function. So I've substituted a transparent GIF in the same location, and made it the size I need by setting its "width" attribute. And the "buttons" in this case are simple HTML text.

See the finished page

But what if your page is too wide? Find out next.