2.4 Full Height Columns

In multiple page websites, occasionally there may be the odd page that doesn't contain enough content to stretch the containing divs to the bottom of the screen. In some sites this may not be a problem; in others, it may affect page layout / presentation. When tables were used for controlling page layout, this was easily fixed by setting the table height to the desired value. With CSS however, it is a little more complicated.

Many designers make the mistake in thinking that adding height:100%; into the stylesheet to a container div will make it become the full height of the screen. It won't. This is because divs are rather like boxes within boxes. The column divs are no doubt in a container div that is inside some sort of page wrapping div that is inside the body div that is inside the html div (the top and first available element). If no heights are set for these other div boxes then the column div has nothing to reference its 100% height against.

Luckily the solution is fairly simple: add a height to the root elements i.e. the html and body tags. Then you can add min-height:100%; to the required container / column divs.

html, body	{height:100%;}

#column1	{min-height:100%;}

If this sounds too simple, then it is. Unfortunately IE6 and below don't recognise min-height and reads height instead in the same way (as min-height). To get IE6 to read height and other browers to read min-height, we can use the underscore hack and add _height:100%; to the code. All browers bar IE ignore code after an underscore. So we now have:

html, body	{height:100%;}

#column1	{min-height:100%;
		_height: 100%;}

For our popular 3 column layout with header and footer the CSS would be something like this:

html, body	{height:100%;}

body		{text-align: center;}

#wrap		{margin: 0 auto;
		width: 900px;
		height:100%;}

#header 	{width: 900px;
		height: 100px;}

#content	{display: inline;
		float: left;
		width: 600px;
		min-height:100%;
		_height: 100%;
		margin-left: 150px;}

#leftbox	{display: inline;
		float: left;
		width: 150px;
		min-height:100%;
		_height: 100%;
		margin-left: -900px;}

#rightbox	{display: inline;
		float: left;
		width: 150px;
		min-height:100%;
		_height: 100%;}

#footer 	{clear: both;}

And the html would be just like before (in CSS : Webpage Layouts):

<body>
 <div id="wrap">
   <div id="header">
   </div>
   <div id="content">
   </div>
   <div id="rightbox">
   </div>
   <div id="leftbox">
   </div>
   </div>
   <div id="footer">
   </div>
 </div>
</body>

Thankfully IE6 should by now be nothing more than a memory, and so the fix should no longer be required.