Divs Just Don't Add Up

Template update: Aug. 29, 2007

The move from table-based coding to all-CSS can certainly throw up some interesting challenges. Take math, for example.

Today I made updates that included a change to the div width for three different styles in the all-CSS templates. This had to be done because of an oscure bug that caused the body section of the templates to get forced down below the left navigation.

Extensive testing may not be exhaustive

Why wasn't this caught in testing?

The all-CSS templates didn't do me the courtesy of breaking in a way that was consistent. They worked just fine on all platforms and browsers I used in testing. However, they broke for one person on campus who was viewing them using IE 7 on Windows and another person who, lucky for me, works down the hall and was using IE 6 on Windows. Not being able to replicate this problem on any other machine, I was forced to borrow my office mate's computer to make changes to the CSS.

I've learned that CSS widths and padding cannot be calculated like table widths and padding. With tables, the math worked. All the widths of all the columns plus the padding added up to the width for the entire table.

This is not the case for divs in CSS. The rule of thumb seems to be to experiment with widths and do thorough testing to see just how wide you can make your div(s) before the layout breaks. Then add some wiggle room just in case there's a couple of renagade computers out there that will toss all your hard work down below the left navigation.

The "final" fix

In the end, I changed the div for the left navigation from 150 pixles wide to 149 pixels. The div for the center column in a three column layout (like this page) was changed from 388 pixels wide to 380. The div for a two column layout was changed from 590 pixels wide to 570.

There's probably a way to make this all make sense. I don't know what that is - yet. I'm just relaying my discovery so that you can avoid the same problem.

For those of you on the CSS-DEV list—I appreciate your help and suggestions for this fix. I tried each suggested fix, and this was what I settled on. It may not be perfect, but it seems to be working on the offending computers.

Any and all "better" fixes are welcome. E-mail them to WebDepot@umn.edu.

KA

Comments on this issue?

If you would like to offer your insight on this issue, please e-mail webdepot@umn.edu.