I've been struggling to find a resolution for this issue but I haven't been able to come up with anything effective. Here's the basic concept of what I'm trying to achieve.
My goal is to have my layout divided into 3 divs. The first section will be a header displaying a logo, the second section will consist of a horizontal menu, and the third section will display content specific to the selected menu option. Additionally, I want to eliminate the browser scroll bar and ensure that the first two sections are always visible. Meanwhile, the third section should extend to the bottom of the browser window with a scrollbar that remains visible at all times. Although my code functions well in Firefox, it encounters issues in IE8. I understand that using both top and bottom in the same div is generally not recommended, but it actually works as intended in Firefox. I attempted to set the top property and use a height of 100%, but since I'm setting the top position at 163 pixels, it positions the bottom 163 pixels below the window. Ideally, I would like the third section to expand and contract as the window size changes vertically. Below is a simplified version of my code. To simplify testing and minimize working with multiple files, I've utilized inline styles. The presence of the index.css file is unimportant in this context.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Test Junk</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div style="background-color:#cccea2; text-align:center;height:136">
section 1
</div>
<div style="background-color:#ccace2; text-align:center;height:27">
section 2
</div>
<div style="background-color:#225522; text-align:center;position:absolute;top:163;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden;">
section 3
</div>
</body>
</html>
UPDATE: I've made some progress by using the XHTML doctype and I'm currently working on finding a proper solution. However, during my extensive search for a resolution, I stumbled upon this example which further added to my confusion as to why using top and bottom properties together in a div is discouraged despite them serving different purposes.