I am having a problem with my CSS, what I am trying to achieve is a black box that stretches the height of the browser, and on top a grey box that also stretches the length of the browser. When I use pixels to set the height it works, but with percentages it doesn't. I want to use percentages so that when the browser is resized the boxes (which will be filled with content later) will remain a constant size. Any help you can give would be appreciated. Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Taber Citizens On Patrol</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
The problem you are having is that height: 100% (or any percentage) sets the height of the element as a percentage of it's parent.
The "shadow" and "front" divs are set to ~95% height but that is 95% of there parent, the body element. Since the body element just contains a ul it isn't very height. Try setting the height of the body element too (to something like 95%).