Part Three: Centering boxes

As you saw from the last page, we now have a box that is changing both height and width, but it wasn't centered. How do we get it centered? Well the first thought would be to place a 1 cell table on the page, set it for 100% height and width and stick our table inside. That will work if we wanted to center something with fixed size in the center, but the various browsers all have bugs when doing that with a variable sized table. Both Netscape 4 and 6 will ignore any height settings for tables that are nested in other tables. You can only reliably set the height of the outermost table on the page. Netscape 6 has an additional bug that even if it is the outermost table, if it is inside either DIV tags or CENTER tags then it ignores the height for the table. IE has it's own bug with percentage heights. If you nest a table set to percentage height inside an outer table set to 100% height, IE will ignore the outer table's cell alignment settings and will not center the table.

So where does that leave us? Well our only choice left is to make the border be part of the outer table. So we will add rows and columns all around the table and integrate it into one single outer table.

Next we have to figure out what sizes to set. We know the corners of the box are fixed sizes in pixels. We also know that we want the whole table to be 100% wide by 100% tall. That leaves the top middle and bottom row, and the left center and right column. We will split up the 3 rows and the 3 columns so that adding the 3 in either direction adds up to the 98% that we were using before for the middle rows/columns. That will continue to squeeze the table cells holding the corner graphics so our table does not fall apart. So let's try setting the center row and column each to 70% and set the outer rows and columns to 14% each. That adds up to 98% in each direction.