How to make a DIV that is static and non scrolling

This is an easy, yet highly effective trick.

If you want to create a region of your page that has text or a picture that does not move when the page scrolls, you can try using something like this in your CSS/style definition:


<style>

div.LockedInPlace
{
margin: 0px;
border: 2px solid #000000;
text-align: left;
width: 250px;
height: 70px;
position: fixed;
top: 3px;
left: 3px;
background-color: #CCCCFF;
font-weight: bold;
}

</style>


<div class="LockedInPlace">

This block will not scroll with the page.

</div>


Using this code as a template, you should see a blue box that is 250x70 in the upper left hand corner of your page.