Right, I have this 100% height layout but it isn't the whole height of the area avaiable its a maybe few pixel over. I have a included a 2 screen shots one is a real screen shot of what it looks like. The other is an edited version, which is what i want it to look like. Both layouts appear the same in IE an Firefox.
Screenshots:
Real screenshot of what I have now.
Edited screenshot of what I aim to have/want.
I have also provided the HTML Code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>...</title>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
height: 100%;
}
#left {
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 200px;
height: 100%;
color: #333;
background: #eaeaea;
border: 1px solid #333;
}
#content {
position: absolute;
left: 200px;
top: 0;
right: 0;
padding: 0;
height: 100%;
color: #333;
background: #ffc;
border: 1px solid #333;
overflow: scroll;
}
#left p {
padding: 10px;
}
#content p {
padding: 10px;
}
</style>
</head>
<body>
<div id="left">
<p class="top">aopjfshkmal;hba ha</p>
<p>aharijkuyjrawtrwh</p>
<p>auetbvdfhiti7okl,hevd</p>
</div>
<div id="content">
<p>Tsetukuyskpf;ps'ra3w'lmrtefkdylatsururtyryrt.fok./owe sjheak, asiuflajrlk eaiojra.r arsfs eatheakra gaiojtnar atkajehtakn.trna</p>
</div>
</body>
</html>