As a part of this new redesign I ran across what seems to be a very common, yet seemingly frustrating problem with setting your sidebar to the full height of a page (not just the screen). It made sense in my mind to simply set the height of the sidebar div to 100%. But oh no, all that gets you is a headache and a pocket full of lint. I tried everything from setting the body and html tag height to 100% to using a min-height of 100% on the sidebar as well, but no luck. I'm still not sure whether this is a browser problem or a CSS problem. In either case I knew I was going to have to do my homework.
Type the words "full height sidebar" into google and you'll get over 300,000 results. With that many pages staring you in the face it can seem a little overwhelming. But I knew I wouldn't have to look that hard, what with Googles superb job of site indexing and all. After reading through a few forums I started to realize the problem I was having. Since my sidebar is floated right it sets the height according to the content that is inside of it, not to the height of the page itself. So for example, if I only had three lines of text in my sidebar it would only span the height according to those three lines of text. I think that worked fine in my old design, as seen below,
but with my new design using a dark background and a light grey sidebar it didn't look so pretty. And sure there are those out there who may say they like the sidebar to be cut short, but I think they're just being lazy.
Enter our hero, the magnificent, super-duper wrapper div. To be honest I don't know why I didn't think of this sooner, at work I always wrap my content. But in this case it hadn't occurred to me. But low and behold, as soon as I wrapped my content and my sidebar and set the background color to match that of my sidebar and set the height to 100% it worked like a charm. That is to say on some pages. You see the next problem came when my sidebar would extend pass the content, then my content would have this ugly grey area underneath it. And that wasn't going to work since I'm using #ffffff as the background color for my content. But even if I changed the wrapper background to white my sidebar would end up looking cut short when the content extended longer than the sidebar, which was my original problem to begin with. UGH!
Cue sound of angels singing. While taking a break from the code, washing my face to be exact, it clicked in my brain what needed to happen. It was so simple. Why hadn't I seen it before? All that was needed was a simple background image repeated on the y-axis that matched my sidebar and to set the background color to white. Now it didn't matter the length of the content or the length of the sidebar, all my pages were covered. Yay!
So what do you think of the new design? Do you like it better than my previous theme? Would you like to see it in the WordPress theme directory?