Reboot: The CSS

I've been having more and more fun with CSS these days and the Reboot gave me an opportunity to really have fun with things.

Source Order

One of the ways I've tried to "optimize" my site is to be fairly strict in source order. Article first, comments second, and then navigation and the rest of it comes last. (It's debatable whether navigation should be so far down as some research has shown that users of screenreaders prefer it at the top.) To do most of this, I've used a heavy combination of floats, relative positioning and absolute positioning (with a little fixed thrown in for fun).

Absolutely Relative

Andy Clarke talked about absolutely positioning elements within relatively positioned containers last December and it's a technique I've used often. The content area, for example, is relatively positioned and the On Topic section is absolutely positioned over from the left. This takes it out of the document flow which allows the rest of the article to appear underneath the title. This is a slightly different application than what Andy talks about which covered overlapping elements within a container.

Center Alignment of Absolutely and Fixed Positioned Elements

Absolute and fixed positioned elements not in a relatively positioned container will position themselves from the top left corner. I didn't expect it but trying to align elements in a centered design is a little more complicated.

When the page is left aligned, you just need to specify how many pixels things are from the left edge. Simple enough. But when things are aligned center, the distance from the left edge is now a percentage. However, I know that the distance to the center of the screen is 50%. Then I'd just shift the elements from the center using positive or negative margin.

#element {
    position:absolute;
    left:50%;
    margin-left:-300px;
}

Containers

One of the big things I had to worry about was which elements had to be contained and which didn't. Sometimes it just became too awkward to try and position an element within another and so I'd move it outside the container. The navigation and search previously found themselves in the sidebar but got moved out so that I could more easily position them from the center line and not from the position of the sidebar. This also made the column collapser possible as it meant I wouldn't be hiding primary elements.

Using overflow:hidden to contain floats also introduced some interested side effects. I played with the position of the fixed comments box in relation to the top of the page because, at least in Firefox, when you scrolled down too far, the comment box would disappear under the edge of the content area. This was because I used overflow:hidden; to contain my floats. Although, interestingly enough, it wouldn't get hidden when scrolling too high.

The same thing can happen with absolutely positioned elements. The light bulb widget originally got inserted into the content container but when trying to move the element to the left it'd get hidden.

Div-itis

This is always a tough one to handle. It's pretty easy to just slap a DIV in whereever you need one. They are innocuous but handy. I also often get into a situation where I prototype something and use DIV's because I don't care what the content is, yet. It's just a proof. Then, when I move it into production, I don't revisit the semantics and how it can all be tied together a little better. Should something be a header? Can I put the class directly on an inside element?

Flexible Width?

Why not a flexible em-based layout? I agree that this would have been nicer. Unfortunately, this design still holds closely to the original layout.

Maybe the next time, flexible widths will be the way to go.