Introduction
Most web developers, when trying to use CSS, instead of tables, to style their web pages run into a common problem. That problem is how to get a div to expand to 100% of the height of the screen. What most developers do instantly is something like the following:
CSS:
div#leftSide, div#rightSide {
float: left;
height: 100%;
}
div#leftSide {
background-color: #231F20;
width: 125px;
}
div#rightSide { padding-left: 10px; }
HTML:
<html>
<head>
<title>My Table-less Web Page</title>
</head>
<body>
<div id="leftSide">Some content on the left side.</div>
<div id="rightSide">Some content on the right side.</div>
</body>
</html>
However, that just does not work. The height of the div will only stretch down as far as the content within that div go to.
The Problem
The problem here lies in the hierarchy of the div. Remember that the div inherits information from its parent container. You might be wondering that the div does not have any parent container because it is the first item within the body tag. Well, that right there is your answer, it is within the body tag. The body tag is the parent container for the div and unless you specify its height, it will defaults to auto, which basically is the same as expand the height to however much is needed by the content.
So, even if you set the height of the div to 100%, it is really saying the height of this div will be 100% of its parent container, in this case, has not been specified so it defaults to auto. 100% of auto is still auto and that is why your div would not expand to the height of the screen.
The Solution
The solution is very simple and you might have already guessed it by now. Just add a height attribute to the body tag. But wait, is that it? If you just add the height to the body tag, it will work under IE but look at it in Firefox and you will notice that nothing has changed. Firefox is strict in terms of its DOM structure and requires you to add the height attribute to not only the body tag but the html tag as well. So, the final solution looks like the following:
CSS:
html, body { height: 100%; }
div#leftSide, div#rightSide {
float: left;
height: 100%;
}
div#leftSide {
background-color: #231F20;
width: 125px;
}
div#rightSide { padding-left: 10px; }
HTML:
<html>
<head>
<title>My Table-less Web Page</title>
</head>
<body>
<div id="leftSide">Some content on the left side.</div>
<div id="rightSide">Some content on the right side.</div>
</body>
</html>
As a side note, remember to include that comma between html and body. Too many people forget about that comma and end up not getting this trick to work.