redesign
October 28, 2008
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?
15 Responses to redesign
-
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.
-
Conrad Kelleher says:
Great use of color and love the layout. Big fan of minimalist approach when it is done well, as it is in this case.
-
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/christiansissonWe can share some good stuff there!
Thanks for your nice comments!Cheers!!
-
Tim says:
So, I came across your blog from blogdesignblog.blog…er, I mean .com. I have to interject something here.
First, is this the actual final design because I was reading the comments and penitantman says “Not sure why specifically, but I really dig that simple cloud element in the footer.” I don’t see any cloud element below.
The design is simple and clean, however, you are using a very organic, hand-drawn looking font. Now this font could work with a different design that is completely hand-drawn, however, it looked really out of place when you plop it on a white background with very square header elements and a very rectangular grid format. In this design, your logo is not working. At the least, if you are going for a very clean rigid look then the curves need to be adjusted to look more “perfect”. Right now it looks like you just used the Illustrator pen tool and started dragging out a bunch of control points without fixing them up later. It looks unfinished and sloppy.
Again, this look could be good if it was surrounded by a better layout/design.
Last, your logo is entirely TOO HUGE! That is a prime piece of real estate you are using at the top of this page and half of the window on a 1024 monitor s taken up by your logo. It’s all I see when I come to this page. Maybe that is your intent? But it is not a good intent if so. Ever see this site? http://makemylogobiggercream.com/Sorry if this might seem harsh, but it is intended to be constructive.
I guess a simple fix would be to add some of your artwork to the header and the rest your logo on top of that (reducing it in size as well).
Or take it in a different direction and do a more organic looking page. You have an illustration portfolio. Why don’t you illustrate this page? I come here and I don’t even know that you do any illustrations at all.I know that when I see posts like this on other blogs people always write back (not necessarily the blog author) and say things like, “Well, let’s see your website.” Or “Well, I bet he’s not even a designer.” etc, etc. Well, I am not looking to start any kind of flame war here, just offering some suggestions that would make this blog better.
Ti (not leaving my website address on purpose) m-
Thanks for the comments. I’m glad you have the gusto to tell me how you really feel. But first you must understand that you’re looking at an old post, when I redesigned my site a year ago.
-
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