CSS-2 "solution"

[Andrew Mutch]

One of the benefits of a long commute is that you can turn over in your head those
problems from the work day.  So it was with my CSS layout problem last night.
Fortunately, I had the advantage of some ideas from Thomas Dowling about how I
might solve my problem.  Thanks to him, I've worked out a decent solution.

What I was originally trying to do was right-align a navigational table "over" the
content of a menu bar that included the site ID information.  While I'm sure there
is an easy way to do this in CSS, Thomas helped me realized that the better way to
structure those items was as 2 separate elements.  The site ID information
belonged in one box, aligned to the left.  The navigational menu belonged in
another box, aligned to the right.  By keeping these items separate, I was able to
have greater control over the individual elements in each box.  I wrapped both
boxes in a "wrapper", which provided the common background color, border, margin
for both elements, ensuring that those elements displayed consistently.

You can see the results here:

http://tln.lib.mi.us/~amutch/concept3.htm

and compare them to my original page:

http://tln.lib.mi.us/~amutch/index.html

I wasn't going for a duplicate of the original. After all, this is supposed to be
a redesign!  But, I did want to see if I could replicate some of the tables from
the original. As you can see in the comparison, I think they look very similar.  I
looked at the original and I think I used at least 6 tables, some just for
layout.  Now, I have zero!  I also was able to get rid of "spacer-gifs" and other
hacks that I has used for layout purposes.  Plus, it is simple for me to easily
adjust the page layout by adjusting the style sheet.  Try doing that with a
tables-based layout!

I did have to make one compromise.  I wanted to wrap a contrasting border around
the top and left side of my navigational table.  That was one element that I just
wasn't able to get to work in both IE6 and Mozilla.  When it worked in one, it
didn't work in the other or didn't display the way that I wanted it to look.  I
know their is a solution, it's just a matter or working it out.

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI