<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0; line-height: 1em;}/* Set everything */
html, body {min-height:100%; /*for compliant browsers*/
font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */}
body {font-size: 65%; padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/}
#wrapper p {color:black; background-color:transparent; font-size:1.2em; line-height:1.2em; margin:10px 0 10px 0;}
/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */
ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
ul li a {height: 1%; /* make links honour display: block; properly */}
#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */
html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif; line-height:1.1em;}
h1 {font-size:3.1em;}
h2 {font-size:2.7em;}
h3 {font-size:2.3em;}
h4 {font-size:1.9em;}
h5 {font-size:1.5em;}
h6 {font-size:1.1em;}/* Defined default Header sizes*/
a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/
a:link {color: #00f;}
a:visited {color: #009;}
a:focus, a:hover {color: #06f;}/* a:focus for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
a:active {color: #0cf;}
</style>
<style type="text/css">
#navigation {position:relative; width:510px; height:30px; margin:35px auto; padding-top:5px; border-top:10px solid silver;}
#navigation li {display:inline; width:75px; margin-right:20px; text-align:center; list-style-type:none; text-align:center;}
#navigation li a {display:block; width:75px; height:15px; padding:5px 0 5px; border:1px solid black; font-size:120%; background-color:silver; color:black; text-decoration:none;}
#navigation li a:hover{color:yellow; background-color:black; font-weight:bold; letter-spacing:0.04em; text-decoration:underline;}
#navigation li a:active {color:red; background-color:wheat;}
#navigation li a:visited {background-color:#ececec; color:gray;}
#main {position:relative; width:558px; height:auto; border:10px solid silver; border-top:0 none; padding:5px 20px 35px 30px; margin:0 auto;}
</style>
<link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
</head>
<body>
<div id="wrapper">
<ul id="navigation">
<li style="margin-left:20px;"><a title="Home" href="#">Home</a></li>
<li><a title="Orders" href="#">Orders</a></li>
<li><a title="Products" href="#">Products</a></li>
<li><a title="F.O.T.W." href="#">F.O.T.W.</a></li>
<li><a title="Contact" href="#">Contact</a></li>
</ul>
<div id="main">
<img alt="" src="left.gif" style="position:absolute; left:-12px; top:-80px;" />
<img alt="" src="right.gif" style="position:absolute;right:-12px; top:-80px;" />
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness.</p>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
occur in which toil and pain can procure him some great pleasure.</p>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that
are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is
the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>
<p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>
</div>
</div>
</body>
</html> A quick mock of your design. This looks the same for Firefox 3.x as IE7, validates. DIV "#main" will expand/contract vertically as more text is added/removed. The important parts pretaining expressly to this, are in BOLD.
Use with the images, attached. Enjoy. :)