REM State

A short while ago, I decided to buckle down and put some effort into doing some layout fixup. The major motivator for this was that I was starting to feel… well, claustrophobic.

On every page I visited, there seemed to be the same problem: the navigation sidebar, on the right, would take up a lot of horizontal space, but barely a page worth of vertical space. However, due to the nature of the XHTML’s layout, none of the later posts would expand to take up the vacant space underneath the sidebar. What was left was a huge, long page of text in a narrow column, with tons of wasted space off to the right.

Now, I wasn’t going to go to all the trouble to try and make the sidebar have a proper float relationship with the posts — that is a big job, and I’m hoping to tackle it eventually. But I needed a fix that could be done relatively quickly, and give me the vast majority of what I wanted. That meant I needed to make the sidebar be less of a space hog.

The first thing I did was rip out the search bar. It was easily the biggest thing in the sidebar, and it really had no business being there. I moved it up, into the header, and that immediately let me breathe easier. Not only is it now in a more prominent location, it’s also not taking up a disgusting amount of horizontal space all the way down the length of he page. With the big offender out of the way, all that was left to do was to slim down the remaining list of links.

Originally, I did not set the margin and padding of list items to 0, because I wanted to let the browsers perform indenting as they saw fit. However, I overrode this rule in the case of the sidebar, because some browsers indented too steeply. After taking care of the padding and margins for the list items, I fiddled with the width of the content column and the sidebar column, until things lined up the way I wanted them to. This required a little back-and-forth between browsers, since some browsers (notably, older versions of IE) think that “x-small” is a fair deal larger than other browsers.

For the final touch, I decided to rip out the whole sidebar when viewing a WordPress “page.” This gave the page contents extra room to breathe, and since pages should have their own internal navigation anyway, I perceive that it isn’t too much of a loss. Users already lose the sidebar when viewing an individual post, which further reinforces the idea that this move is all right.

Some tasks for later will be to try and devise a true float around the sidebar, as well as to be more selective about which links actually show up in the sidebar in any given context (sub-categories should show up only in the category archives of the parent, only top-level pages should appear in the pages list, etc.). In the mean time, though, my claustrophobia has been allayed, and I’m much happier for it.