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.

I am quite happy with the new design, but at large font sizes, small window sizes or a mild combination of both, the posting headings seem to have a tendency to float downstream. The primary problem seems to be that they do not wrap. Actually, they do, but when they do, they also try to take as much space as possible and thus end up below the timestamp block preceding it, instead of floating around it.

The next thing I will try as a solution for this is to create another level of divs, which will break down the already defined DIV.post into smaller bits, i.e. DIV.post DIV.heading and DIV.post DIV.content. The heading will be set to float left as a whole. Within it, the timestamp might need its own DIV, but will in any case be floated left.

That is for tomorrow—I promised my wife that I would put an end to pulling very late nights and I am already 10 minutes past the agreed shutdown time.

Whole days of work have now gone into researching, learning, collecting bookmarks and a lot of fiddling with CSS. It is a learning high such as I have not had for a while. The symptoms are dead obvious: I have been sitting behind my screen for just about every available minute for the last three days. The amount of available minutes was drastically increased by me sleeping only the bare minimum of 5 or 6 hours a night. I feel a cold coming on, I have a mild headache and I am running out of coffee at an alarming rate. And I utterly do not care, for the dual rewards of learning stuff that is actually marketable and creating a site design that is orders of magnitude better than anything I have done before make it all worthwhile.

The highlights:

• Introduction of detailed tree of DIVs.
• Cleaned up style sheet to take advantage of the clean structure.
• A fairly novel way of displaying the date stamp for a post: broken up in sets of 2 digits, arranged in a stack of 5.
• Adjusted colors to be subtle, yet distinctive.
• Header section with advanced floating arrangement. (try changing the font and/or window size)
• Site still looks crap in IE, but it sort of looks similar, rather than nothing like the intention.

I spent until way late last night updating the style sheet for this site. The previous one had a top navigation bar that would stay in one place, in a frame-like way. It worked, provided a standards-compliant browser was used. The problem, however, is that simple scrolling up and down would make my CPU rev up to 100%, which is probably caused by the browser having to overlay layers with different z-index values and having to redraw the screen for large sections very often. It might also have something to do with the fact that I have smooth scrolling enabled. Weighing the value of the two features (cool tricks on site vs smooth scrolling experience), decided against the tricks.

While cleaning up the remainder, I sought inspiration on this site. I ended up taking more than just the column layout, but also colour and fonts. There will be more tweaking later.

I have been playing around with this CSS stuff for hours now and decided that the way to go for me is to have a nav bar on top, to be filled with smallish buttons. This nav bar will stay in place, while the rest of the page will scroll. Then a link well on the right hand side, which may very well grow beyond one page length, so it needs to be able to scroll as well. Main content is kept in the content well on the left, with a column width that is roughly twothirds of the page. (but not quite).

If you would like to see of use this layout and the associated CSS, be my guest. See if I care. Don't ask me to support it, though.

I finally figured out how to make a section on a page stay where it is, regardless of scrolling. It took me hours of reading through designer pages, getting sidetracked in dozens of very interesting issues, before I decided on mild theft.

The Thunderbird help page has this nifty menu on the left, which can be locked. I do not need the on/off switch; I just wanted to find out how it worked. There is a message in the CSS file warning to not steal the code. I like to think that finding out which of the three possible options for position is the one to use is not quite the same as stealing the whole thing, but in recognition of my inspiration I would like to thank David Tenser.

The trick is to do this in CSS:

#topnav { position: fixed }

and then this in HTML:

<div id="leftnav"> [your stuff here] </div>

I happened to have written not just a ton of documentation for my current employer, but I also did a stylesheet for it. For lack of a quicker alternative, this at least looks somewhat decent.