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?
13 Comments
man… loving this new design! I love the darker look and feel. I love the idea of the two illustrations at the top of each post (i know you did that on the previous design).
~ Aaron I
I like it. Very minimal and well thought out.
Love the clean and minimalistic approach. Very soothing. I also like the two top photos as well. brings you right into an artistic feel and mindset. Well done.
Great use of color and love the layout. Big fan of minimalist approach when it is done well, as it is in this case.
Very clean and classy. I like the dark background as well.
Beautiful execution. Lovely balance and use of typography.
Wow! Thanks so much everyone for your love and support.
Looks really slick and cool, good job Kyle
I like it!! Very simple and delicate!! and i love the colours!
It seems unanimous! Great new design. Simple, clean, effective. Not sure why specifically, but I really dig that simple cloud element in the footer.
On another note, couple of CSS books I highly recommend:
http://www.amazon.com/Beginning-CSS-Web-Development-Professional/dp/1590596897
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145
-Mike
@everyone – you guys rock.
@penitentman – thanks for noticing the cloud.
I did have more in the header but felt they were too overbearing and not keeping in line with the whole minimal approach. Also, thanks for the great CSS book links. I’ll have to check those out.
Your side bar tutorial saved my skin yesterday!
When i find something more related to old book and illustrations i will sure share with you!!
This one is by far one of the best resources of old illustrations: http://bibliodyssey.blogspot.com/
And this one is a treasure:
http://www.leidenarchief.nl/component/option,com_album/Itemid,68/
Do you have a del.icio.us account? Mine is:
http://delicious.com/christiansisson
We can share some good stuff there!
Thanks for your nice comments!
Cheers!!
> Would you like to see it in the WordPress theme directory?
God yes.