Fixed Position Floating Layers

This page has two floating layers. The first one is fixed to its location as defined by the inline code and the second is defined to float at the bottom of the screen by calculating an offset at load time. The strict doctype is require for it to work, otherwise you have to deal with quirks mode and the browsers do the positioning calculation differently and not to standard in quirks mode. The mouse scrollwheel will not work for some drivers. You have to use the slider on the screen.

The styling should be moved to a stylesheet but is inline here to make it easier to understand the necessary property values to get a correct float. To get the source code click on the link below and then just copy and paste into a text file. You will have to change the code to use your own images.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title> Floating Layers</title>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link rel="stylesheet" href="content1.css">
   <link rel="stylesheet" type="text/css" href="CDmain.css">
<style type="text/CSS">
#container {
            width:100%;
            text-align:center;
			margin-bottom:10px;
		    border-right:none;
			border-left:none;
			clear:both;
		   }
#container div {
                display:inline
               }
</style>
<script type="text/javascript">
   var Moffset = 400;
   var floatOffset=250;
   function resetPos()
   {
      str=document.documentElement.scrollTop+Moffset;
      document.getElementById('thediv').style.top=str+'px';
      document.getElementById('floater').style.top=(floatOffset+document.documentElement.scrollTop)+'px';
   }
window.onscroll=resetPos;
</script>
</head>
<body id="bdy" onLoad="Moffset=(document.documentElement.clientHeight-40); resetPos();"
            onResize="Moffset=(document.documentElement.clientHeight-40); resetPos();">
<div id="thediv" style="position:absolute;left:350px;top:400px;z-index:20;width:150px; background-color:blue;">
 <img src="smile.gif"> </div>
<div id="floater" style="position:absolute;left:125px;top:250px;z-index:15;width:150px; background-color:blue;">
<img src="smile.gif">
</div>
<h1 style="margin:0 auto"> Floating Layers</h1>
<h4> A script from COBOLdinosaur</h4>
<p style="color:blue; font-weight:bold;text-align:left;padding:0 20px 0 20px;">
This page has two floating layers. The first one is fixed to its location as defined by the inline code and the second is defined to float at the bottom of the screen by calculating an offset at load time.  The strict doctype is require for it to work, otherwise you have to deal with quirks mode and the browsers do the positioning calculation differently and not to standard in quirks mode.  The mouse scrollwheel will not work for some drivers.  You have to use the slider on the screen.<br /><br />
The styling should be moved to a stylesheet but is inline here to make it easier to understand the necessary property values to get a correct float. To get the source code click on the link below and then just copy and paste into a text file.  You will have to change the code to use your own images.<br /><br />
<a href="floating_layers.txt"> Get Source</a>
</p>
<div style="width:75%;margin:0 auto;text-align:left;">
Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis. 
Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci. 
A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat. 
Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero. 
</div>
</body>
</html>

Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis. Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci. A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat. Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero.

Did you know? You can discuss this article with the mentor who wrote it and others interested in the topic? You are invited to join the discussion with

Got a technical article or tutorial you want to publish on the Internet? Join

in the Round Table Forum and let the Mentors know what you have. If it meets ERT standards, is factual and can help ERT visitors, then ERT Mentors and Editors can help you (without charge) polish your offering so it can be published and promoted by ERT. An article published on ERT may be read by as many as 10,000 visitors a week; promoting you, your site, and your ideas. Please note ERT does not publish re-prints; promotional handouts, or pieces consisting mainly of links. So original technical content only please. If you prefer you can email the Editor