First of all, here's my code. It validates and all that jazz:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<link href="style.css" rel="Stylesheet" type="text/css" />
	<title>CSS Test</title>
</head>
    <body>
		<div id="menu">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu</div>
		<div id="wrapper">
			<div id="tree">tree</div>
			<div id="input">input</div>
			<div id="description">description</div>
		</div>
    </body>
</html>
Code:
* {
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	top: 0px;
	right: 0px;
}

#menu {
	width: 100%;
	height: 100px;
	background-color: #ffff00;
	border: 0px;
	z-index: 1;
	position: absolute;
}

#tree {
	float:left;
	width: 30%;
	height: 100%;
	background-color: #008000;
	border: 0px;
	z-index: 0;
	position: absolute;
	padding-top: 100px;
	top: 0px;
	left: 0px;
}

#input {
	width: 70%;
	height: 70%;
	float: right;
	background-color: #ffa500;
	overflow: auto;
	border: 0px;
	z-index: 0;
	padding-top: 100px;
}

#description {
	width: 70%;
	height: 30%;
	float: right;
	background-color: #add8e6;
	overflow: auto;
	border: 0px;
	z-index: 0;
}
The goal here is to have a fixed height menu at the top of the page, and everything else be percentages and no scrolling in the window. That part works fine, and I did it with z-indexes. The problem, though, is that the padding-top in the menu and input divs to make their content visible below the menu makes the div bigger instead of just pushing the content down. This forces the user to have to scroll, and I don't want that. What should I do?