Sequential Changes

Once again, I’ve fallen into the trap of CSS floats and divs. Because of all the time I spend writing effectively functional code, I’ve fallen into the habit of letting my code changes race ahead of my testing suite because the individual functional blocks which I am composing are so trivial that the composition must be correct.

While this approach is highly effective for functional code, it is far more difficult when dealing with CSS. When I consider floats and divs, I see approximately equally sized rectangular boxes which the computer attempts to orient given various constraints. This model lends itself nicely to visualizing how things should be grouped into divs based on the general float direction and such, but it leaves much to be desired when anything more than a single size of text or font is used.

Why? Because different fonts and different font sizes for patently obvious reasons have different pixel sizes on the screen when the float solver algorithm attempts to align the boxes! Because the boxes are not all of the same size, I wind up with all kinds of seemingly arbitrary padding constants which are required to maintain the arrangement which I desire. Closer inspection, however, shows that these constants are anything but random, they are the amount of padding required to bring the formatted div(s) to the same pixel height so that they will stack correctly.

It may seem silly, but that was my realization as I re-did /resume which is, by the way, generated dynamically using a really cute formatting DSL which I’m too tired to talk about right now.