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>