Gray Is The New White

The redesign is complete, and sub-pages are slowly being converted. A temporary measure (and perhaps a waste of time), converting these pages. This is because, at long last, Hivelogic and Automatic Labs will both be powered by a CMS, eliminating the need for manually modifying or editing pages.

With this redesign, you wanted to recapture the feeling of the older Hivelogic, the one you and everybody else liked, while creating an updated look that couldn’t be more different from the original design. Instead, you wound up with this, the current design, which was the only thing you came up with that didn’t make you physically ill when staring at it.

Design Notes

Valid XHTML/CSS. Rotating header image (reload often, more than 20 images in the hopper). No repeating background images (a solid and creative technique, but not needed here). Left-hand sidebar with a float:left and a fixed width. Right-hand content-area with a left-hand margin to push it into place. No padding. No IE hacks.

The Problem

You wanted pure CSS without a background image. You wanted it so that, should either the sidebar or the content-area grow longer than its counterpart, the border between them would continue for the full length of the page, regardless of which column was longer.

In other words, if the sidebar had a lot of content in it, it would wind up longer than the main content-area, but if the border was attached to the content-content area, it would stop where the content-area stopped and you’d wind up with a naked sidebar. And vice-versa.

The (Simple) Solution

Put a border on the right side of the sidebar and the left side of the content-area and overlap them.

As long as you run a border around the outer-most div and draw borders on the left- and right-hand sides of the inner div elements, the setup would be complete. Because you’re not using padding, multiple floats, or other hackery, just simple CSS, the page holds up across most browsers … even IE 5 Mac.

Many people would have used a repeating background to solve this problem, creating a central column that continues from the top of the page to the bottom. A valid and very popular solution. But this design called for a floating box with content inside, and you wanted to see if you could do it. The solution turned out to be quite easy to implement.

Thoughts

A redesign is a hard thing to do. Visitors want consistency, reliability. They want a feeling of familiarity, and they want to like what they see. The rest of their life seems be in constant flux. Why can’t things, when they’re good, just stay the same?

Reality says that things just change sometimes even though you don’t know why.



So do websites.

More articles in the Archive →