two column design

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> page layout for http://stackoverflow.com/questions/11976356/why-dont-html-elements-always-obey-css-height-attribute </title>
<style type="text/css">

html,body {
    width:100%;
    height:99%;
    margin:0;
    padding:0;
}

#left {
    float:left;
    width:6.50in;
    height:100%;
    border:4px solid #008;
    overflow: auto;
    background-color: #eee;
}

#right {
    position: relative;
    margin-left: 6.58in;
    height:100%;
    text-align:left;
    border:4px solid #080;
}

#left h1 {
    margin-left: 1em;
    color:blue;
}

#left ul {
    list-style-type:none;
    padding:8px 2px;
}

#left ul li a {
    font-size:32px;
    padding: 2px 1em;
    text-decoration:none;
}

#left ul li:hover {
    background-color:blue;
    color:white;
}

#left ul li:hover a {
    color:white;
}

#CONTENT_HOLDER {
    border:1px solid #FF00FF;
    height:100%;
    width:100%;
}

</style>
</head>
<body>

<div id="left">
<h1>Pages</h1>
<div>
    <ul>
        <li><a href="page1.htm" target="CONTENT_HOLDER">First Page</a></li>
        <li><a href="page2.htm" target="CONTENT_HOLDER">Second Page</a></li>
        <li><a href="lastPage.htm"  target="CONTENT_HOLDER">Final Page</a></li>
    </ul>
</div>
</div>

<div id="right">
    <iframe name="CONTENT_HOLDER" id="CONTENT_HOLDER"></iframe>
</div>

</body>
</html>