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.

Published May 06, 2006 · Updated September 14, 2006
Categorized as HTML and CSS
Short URL: https://snook.ca/s/589

Conversation

11 Comments · RSS feed
Mike said on May 06, 2006

What a nice little write-up. Some intresting things pointed out. I especially liked the "Center Alignment of Absolutely and Fixed Positioned Elements" technique. Simple and elegant and saves me from pulling my hair right out.

EJ said on May 06, 2006

Nice explanation!

Kurt Potts said on May 06, 2006

Great redesign. Keep the explinations comin'. I'm currently working on a redesign my self and I look to your blog for examples. My current blog is not exactly up to standards. (I hacked a blogger template to bits.) It is nice to see blogs that are standards based and still have a winning design.

Crille said on May 07, 2006

God damn, that lightswitch was a hell of an idea. I've never seen that before, are you the first to have it?

Jonathan Snook said on May 07, 2006

Crille: The light bulb seemed like a natural option for switching modes. I recommend reading up on zoom layouts. They go quite a bit further in providing a more readable layout.

Dominik Hahn said on May 07, 2006

I absolutely love it! :)

The lightswitch is a very nice idea, you should combine it with a 'click' sound. ;)

jakub zalewski said on May 07, 2006

nice redesign. it'd be nice if the light had a title explaining what it does.
i don't like flexible width so i'm happy it's fixed :)

sem kim said on May 08, 2006

good post. i just love black+green design.
I'm working on that 'flexible width' site these days. one of the great 'flexible width' websites is thinkvitamin.com i think. i just love that site

chowdary said on May 18, 2006

Can u release your previous theme for download please. I really like it and i know may ppl will be ready to grab it. thx

Craig said on August 16, 2006

Great post this has really helped, also I love the colors

wosoom said on October 26, 2006

I love this colors .

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.