I'm encountering an issue with my CSS style that works fine on a static HTML page.
The problem arises when content is dynamically loaded into layer3 and then into layer 2.
I'm struggling to understand the consistency as sometimes the layers are far apart, while other times they overlap each other.
Why is this happening, and how can I ensure that layer3 remains in a fixed position?
An example of the layers being too distant:
<html><head>
<title>Test Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A Menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">
<div id="leftlayer" class="leftlayer">
<form name="searchForm">
Example form:
<input name="search" type="text">
<br>
<input name="Submit" value="Update" onclick="searchUserInfo('parallelimport');return false" type="submit">
</form>
</div></div>
<div id="Layer3"><h1> Why is the layer so far away?</h1>
</div>
</div>
</body></html>
An example of the layers overlapping:
<html><head>
<title>Test Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A Menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">Content goes here</div>
<div id="Layer3">
<h1>Why is the layer up here now?</h1>
<table width="100%" border="0">
<tbody>
<tr>
<td width="15%">This wrecks</td>
<td width="10%">The very</td>
<td width="65%">Layout of the page</td>
</tr>
</table>
</div>
</div>
</div>
</body></html>
An ideal scenario I want to achieve:
<html><head>
<title>Test Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A Menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">
<h1>I would like information to be here</h1>
<div id="Layer3">
<h1>And then the table to be below the above info</h1>
<table width="85%" border="0">
<tbody>
<tr>
<td width="15%"><strong>This is</strong></td>
<td width="20%"><strong>Much better</strong></td>
</tr>
</tbody>
</table>
<h1>I would like Layer 3 to always remain in a consistent position</h1>
<h1>Does this mean I should have it outside of Layer2?</h1>
</div>
</div>
</div>
</body></html>
My custom CSS styling includes:
#Layer0 {
width: 100%;
height: 100%;
}
body{
...
}
...
#Layer3 {
float: bottom;
}