Hey everyone, I know it has been a while from my last post, and I know I am severely slacking on the “Building a Personal Brand” series. No, there is not really a logical excuse for this madness, just swamped with client work at the moment, which is always a good thing for any business, but freelancers especially. So what is the reason behind this post? Well the other day I was working on a client site and was attempting to have a height on a sidebar that extended from the top of the containing div to the bottom. I, like most people figured well I will just give the div class that I want to extend a 100% height such as this:

.myclass {height:100%;}

This really didn’t work out too well because it didn’t do anything.  The height was the same as it was before I added the code.  Why is that?  I spent a while researching it through my CSS books and then went to google to find a quick answer.  What I found makes perfect sense, but I will be honest, I never thought about doing it.  With talks with some friends and a quick google search, I learned that the containing div class needs to have a height set of 100%. So the HTML would look something like this:

<div class=”mycontainer”>
<div class=”myclass”>expanded box content</div>
</div>

and the css for this would look something like this:

.mycontainer {min-height:100%;}
.myclass {min-height:100%;}

So the lesson of this post, is to ensure that if you are indeed looking to make a container expand the entire width of the page you need to give the div you want to expand a height of 100% PLUS the containing div a 100% height also. I would like the people that helped me understand this.  I can’t believe something that simple was so annoying.  Oh well, lesson learned!