Here at Topline, I personally tend to spend most of my time writing C# code and T-SQL. In the last year or two, however, in a game of tag that I didn’t realize I was playing, I have become “it” when it comes to UI design. As a result, I have spent a lot of evenings learning CSS, and, contrary to what I supposed at the outset, I have grown to enjoy quite a bit. That being said, I am still learning and from time to time I encounter new and earth-shattering principles off CSS design that I have somehow missed before. This is especially true of using CSS for positioning and not just to change individual tag appearance.
In any case, such an epiphany happened to me this week. To give some background, while trying to add a different skin to a previously designed website for my brother-in-law, I was converting it from the dreaded table layout to use CSS Positioning. I was attempting to do a fairly standard layout which would consist of the following:
- A Header
- A Body
- A Footer
A very simplified version of my HTML would look like this:
<html> <head>Head stuff Here</head> <body> <div id="dvContainer"> <div id="dvHeader">Header Here</div> <div id="dvBody"> <div id="dvMenu">Menu Here</div> <div id="dvContent">Content Here</div> </div> <div id="dvFooter">Footer Here</div> </div> </body> </html>
Well, that all seems straightforward enough. I defined an external CSS file, added a reference to it on the page and started changing the CSS so that the entire site would look like a million bucks …. and frankly, it did. Then my whole world came crashing down on me. I had been working on the site at home using my strange little monitor. One morning when I came in to work, I decided to pull it up on my humongous monitor there just to see how it would look and I was horrified to see the result. At home, on all of the pages the content was long enough to push the footer past the bottom of my screen. At work however, the content ended up only going halfway down the page, which made the footer seem to float around in the middle of the screen as if it were trying to attack the header in some sort of ill-conceived CSS Coup d’etat.
It seemed that the problem should be easy enough to fix though, so that night I did a little research about getting the footer to stay at the bottom of the page, which is related but the subject of another post. When I implemented the fix though which, among other things, involved setting the “dvContainer” min-height to 100% and the “dvBody” style min-height to 100% in my stylesheet (along with a couple of other styles to the header and footer which I won’t go into here), the hight simply would not change.
No matter what I did, I could not get “dvContainer” to actually extend to 100% of height of the screen. Finally, I realized that the crux of my problem had to do with the way that percentage settings work in CSS. In essence, when you set something to be a percentage height, you are telling the browser that it should be XX% of whatever the tag happens to be inside of. So, if I had the following markup:
<div id="container" style="height: 250px;"> <div id="coolStuff" style="height: 100%">Cool Stuff Here</div> </div>
You might think that the “coolStuff” div tag would be 100% of the screen, but in actuality, the “coolStuff” div tag would only be 250 pixels tall because it is only going to be 100% of the height of the box that it is inside of. For the most part, I think that the majority of people doing CSS Development already knew this (although if you didn’t I hope that you will revere me from now on). What some people might not know … and I certainly didn’t, is that the body and the HTML tag are included in this. In other words, “body”s are
people containers too.
This might sound a little circular, but the body tag is only going to be as tall as it needs to be to hold whatever is inside of it and setting whatever is inside of it to a height of 100% will only make it as tall as as it needs to be to fit inside the body which, as you recall, is only big enough to fit whatever was inside of the body before its height was set to 100% to begin with. Seriously, “Who’s on first?”
Let me try again, if you only have enough content to extend halfway down your page, that is how tall the body tag will be. Setting the height of the “dvContainer” tag to 100% didn’t do anything because it was only going to be as tall as the body and html tags which had already been set just high enough to hold all of the content on my page. The solution was to set the min-height of both the “body” and “html” tags to 100% too. After I did that viola … my container and my body tags also extended to the bottom of the page and it looks great again.
This leaves us with two “Morals of the Story”
- The “body” and “html” tags are actually containers too and should be treated as such. If you want anything else on the page to cover 100% of the viewable area you need to start by setting the styles correctly there.
- Don’t spend your spare time redesigning websites for your brother-in-law.