Forum Moderators: not2easy
<html>
<head>
<STYLE TYPE="text/css">
<!--
html,body, form
{
height: 100%;
margin: 0;
padding: 0;
background-color: white;
}
#Header
{
height: 60px;
background-color: white;
}
#Middle
{
_height: 100%;/* underscore-hack for IE */
min-height: 100%;
margin-top: -80px; /* #Header height + the margin-bottom */
margin-bottom: -20px;
background-color: Aqua;
}
#MarginTop
{
height: 100px;
}
#MarginBottom
{
height: 20px;
}
#Footer
{
clear: both;
height: 20px;
font-size: 8pt;
color: Gray;
text-align:center;
}
#NavTree
{
float: left;
width: 300px;
height: 100%;
padding-left: 10px;
border: solid 1px red;
}
#ContentArea
{
text-align: left;
_height: 100%; /* underscore-hack for IE */
height: 100%;
min-height: 100%;
background-color: Lime;
}
-->
</STYLE>
</head>
<body>
<div id="Header">
My header text
</div>
<div id="Middle">
<div id="MarginTop"></div>
<div id="NavTree">
Left Nav
</div>
<div id="ContentArea">
I want to put an IFrame here that fills this area.
</div>
</div>
<div id="MarginBottom"></div>
<div id="Footer">
My footer text
</div>
</body>
</html>
1. In IE and Firefox, the height of the layout is taller than the viewing area in the browser (creating a vertical scrollbar).
2. In Firefox, the ContentArea div is expanding the entire width of the viewing area. I want it to start to the right of the "NavTree" DIV.
