Goodnight Art & Design
For all your basic design layouts in print & web design as well as much more!

Left Panel Constant Height

Below is the source code just for the left panel section to get the blue bar to show a set height in IE5. It consist of a division with 2 layers inside that division. layer1 is hidden with an image 50x600 in it (could be 1x600). With layer1 hidden and also placed below layer2 in the 'OutlineEditor' (see image in this section), the script or what ever is in layer2 will show on the blue bg of leftpanel division. This note and the code are on layers 4 & 3
Page layout below is set to 820 px wide


A script is above this line along with this note and nothing else is on layer2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>leftpaneltest</title>
<style type="text/css" media="screen"><!--
#leftpanel{ background-color: #80b2ff; position: absolute; top: 150px; left: 0; width: 180px; visibility: visible; border-right: 10px solid silver; }
#layer1 { background-color: #80b2ff; width: 180px; position: relative; visibility: hidden; }
#layer2 { width: 180px; position: relative; top: 0; visibility: visible; float: left; }
--></style>
</head>

<body bgcolor="#006600">
<div id="leftpanel">
<div id="layer2">
<script language="JavaScript">
<!-- \
new menu(MENU_ITEMS, MENU_TPL);
// -->\
</script>
<br />
<font size="-1">A script is above this line along with this note and nothing else is on layer2 </font></div>
<div id="layer1">
<img src="b50x600.gif" alt="" height="600" width="50" border="0" /></div>
</div>
</body>

</html>

This panel would be the top header of the page when using the page code below