Positioning with Cascading Style Sheets
By Chuck White
Web Techniques, December 1997

Web Techniques grants permission to use these listings for private or 
commercial use provided that credit to Web Techniques and the author is 
maintained within the comments of the source. For questions, contact
editors@web-techniques.com.


LISTING ONE

<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
        <STYLE TYPE="text/css">
<!--
#WebTechniquesBackground {
position:absolute;
top: 5px;
left: 20px;
color: #DABCF5;
}
#topLayer {
position:absolute;
top: 80px;
left: 30px;
width: 400px;
color: #004080;
}
BODY {
font: 14pt/16pt "Times-Roman", Times, serif;
font-style: normal;
background: white;
color: #004080
}
.hugeBackgroundFont {
font-size: 110pt;
font-style: bold
}
.overLayFont {
font-size: 45pt;
font-style:bold;
}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN ID=WebTechniquesBackground 
CLASS=hugeBackgroundFont>WebTechniques</SPAN>
<SPAN ID=topLayer CLASS=overLayFont>Dynamic HTML</SPAN>
</BODY>
</HTML>



LISTING TWO


<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
        <STYLE TYPE="text/css">
<!--
#grid {position: absolute;
top: 0px;
left: 0px;}
#Red50 {position: absolute;
top:0px;
left:0px}
#Blue50 {position: absolute;
top:50px;
left: 50px}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN ID=grid><IMG SRC="Images/grid.JPG" WIDTH=800 HEIGHT=600 
BORDER=0></SPAN>
<SPAN ID=Red50><IMG SRC="Images/Red50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
<SPAN ID=Blue50><IMG SRC="Images/Blue50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
</BODY>
</HTML>



LISTING THREE



<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
        <STYLE TYPE="text/css">
<!--
#grid {position: absolute;
top: 0px;
left: 0px;}
#Blue50 {position: relative;
top:0px;
left: 0px}
#Red50 {position: relative;
top: 0px;
left:0px}
#Blue100 {position: relative;
top: 0px;
left:0px
}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN ID=grid><IMG SRC="Images/grid.JPG" WIDTH=800 HEIGHT=600 
BORDER=0></SPAN>
<SPAN ID=Blue50><IMG SRC="Images/Blue50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
<SPAN ID=Red50><IMG SRC="Images/Red50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
<SPAN ID=Blue100><IMG SRC="Images/Blue100x100.gif" WIDTH=100 
HEIGHT=100 BORDER=0></SPAN>
</BODY>
</HTML>


LISTING FOUR



<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
</HEAD>
<BODY>
<SPAN STYLE ="position: absolute;
top: 0px;
left: 0px"><IMG SRC="Images/grid.JPG" WIDTH=800 HEIGHT=600 
BORDER=0></SPAN>
<SPAN STYLE="position: relative; left: 50px; width: 400px">
I'm interested in developing a way to make the red box "float" to the 
left of this
<SPAN STYLE="position: absolute; left: -55px; color: red;">
<IMG SRC="Images/Red50x50.gif" WIDTH=50 HEIGHT=50 
BORDER=0></SPAN>
paragraph.</SPAN>
</BODY>
</HTML>



LISTING FIVE



<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>

 <STYLE TYPE="text/css"> BODY {line-height: 50px} 
#grid {position:absolute; top:0px; left:0px}
#outer {position: relative; top: -25px}
#inner {position: relative; top: 25px}
#leftText {position: relative;}
#rightText {position: relative;}
</STYLE>
</HEAD>
<BODY>
<SPAN ID=grid><IMG SRC="Images/grid.JPG" WIDTH=800 HEIGHT=600 
BORDER=0>
</SPAN>
<SPAN ID= leftText>Some Text on the Left.
</SPAN>
<SPAN ID=outer> <IMG SRC="Images/Blue100x100.gif" WIDTH=100 
HEIGHT=100 BORDER=0></SPAN>
<SPAN ID=inner> <IMG SRC="Images/Blue50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
<SPAN ID=outer><IMG SRC="Images/Red100x100.gif" WIDTH=100 
HEIGHT=100 BORDER=0></SPAN>
<SPAN ID= rightText>Some Text on the Right.
</SPAN>
</BODY>
</HTML>


LISTING SIX


<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
        <STYLE TYPE="text/css">
<!--
#grid {position: absolute;
top: 0px;
left: 0px;
z-index: 1}
#Blue50 {position: relative;
top:0px;
left: 0px;
z-index:2}
#Red50 {position: relative;
top: 0px;
left:0px;
z-index:3}
#Blue100 {position: relative;
top: 0px;
left:0px;
z-index:4
}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN ID=grid><IMG SRC="Images/grid.JPG" WIDTH=800 HEIGHT=600 
BORDER=0></SPAN>
<SPAN ID=Blue50><IMG SRC="Images/Blue50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
<SPAN ID=Red50><IMG SRC="Images/Red50x50.gif" WIDTH=50 
HEIGHT=50 BORDER=0></SPAN>
<SPAN ID=Blue100><IMG SRC="Images/Blue100x100.gif" WIDTH=100 
HEIGHT=100 BORDER=0></SPAN>
</BODY>
</HTML>


LISTING SEVEN


<HTML>
<HEAD>
        <TITLE>Dynamic HTML WebTechniques</TITLE>
        <STYLE TYPE="text/css">
<!--
#grid {position: absolute;
top: 0px;
left: 0px;
z-index: 1}
#form {position: absolute;
top 20px;
left: 20px}
#blueBox { position: absolute;
top: 1in;
left: 2in;
visibility: visible}
#redBox { position: absolute;
top: 1in;
left: 2in;
visibility: hidden;}
-->
</STYLE>
<SCRIPT = "JavaScript1.2">
function showRedBox() {
        document.layers["redBox"].visibility = "visible";
                document.layers ["blueBox"].visibility = "hidden";
        }
                function showBlueBox() {
        document.layers["blueBox"].visibility = "visible";
                document.layers["redBox"].visibility = "hidden";
        }

</SCRIPT>       
</HEAD>
<BODY>
<P>Click on the appropriate button to make a box appear.</P>

<DIV ID="blueBox">
<IMG SRC="Images/Blue100x100.gif" WIDTH=100 HEIGHT=100 
BORDER=0>
</DIV>
<DIV ID="redBox">
<IMG SRC="Images/Red100x100.gif" WIDTH=100 HEIGHT=100 
BORDER=0>  
</DIV><SPAN ID=form>
<FORM NAME="boxForm">
   <INPUT TYPE="button" VALUE="Show The Red Box" 
onClick='showRedBox("redBox")'>
 <INPUT TYPE="button" VALUE="Show The Blue Box" 
onClick='showBlueBox("blueBox")'>
</FORM></SPAN>
</BODY>
</HTML>