2003/09/08

2003 09 08

Base | Navelstaring

00:52

General cleanup

Now that most of my design gripes have been put to bed, I spent some time cleaning up the content, because the use of different classes and divisions was showing three generations of the style sheet within one document. A side effect of prototyping in place, I guess. :)

In a concessive moment of the kind that I would like to keep to an absolute minimum, I have added a bit of invisible space in the header section, so that IE sizes the section properly. Sort of. In any case, I am now confident enough that the page will look decent with the settings with which IE ships by default. (read: settings which are suitable for reading 15 feet away from your monitor. Font control is not one of IE's strong points, is it?)

Base | WebDev | CSS

00:14

Loose heading problem solved

The problem with headings flowing downstream when they get too wide for the containing box turned out to be unsolvable in the way I envisaged. In fact, the specification actually explains why it happened:

Here are the precise rules that govern the behavior of floats:

...

7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

(CSS2 specification, section 9.5.1)

In other words: as long as the heading is not the outer left element, its width can not extend beyond the space left over by the float for the right sidebar. I actually tried making the heading the far left element, but aside from aesthetic issues (the date stamp still needs to go somewhere and I really like the way it is set up now) that didn't work either. In itself, that problem might have to do with the fact that we are inside a nested DIV, which is floated itself, but I haven't pursued that strategy any further.

Instead, I have removed all unnecessary float and clear tags and just set a max-width of a percentage of the window width. In doing this, I had to change the width of the sidebar to a percentage as well, but that was overdue anyway.