I didn't know how to title this, so I hope that was informative enough 
I'm not very experienced in making table-less layouts, and this is my first time actually trying absolute or relative positioning in a layout, so if this is something obvious forgive me. Everything was going well until I decided I better move the main div up a couple hundred pixels. I added position:relative;top:-150px; to the style, and IE moved the div up 150 pixels but on Firefox it completely disappeared off the page. I tried a few different values for top, both positive and negative. Then I just got rid of top and had only position:relative and it was still gone. It isn't until I remove it that that it returns.
So, my question is: Why?
By the way, this is how its supposed to look:
<!-- m --><a class="postlink" href="http://www.stellmond.com/diagram.gif">http://www.stellmond.com/diagram.gif</a><!-- m -->
And the page where I'm testing this is here:
<!-- m --><a class="postlink" href="http://www.stellmond.com/test.html">http://www.stellmond.com/test.html</a><!-- m -->
Thanks in advance.<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Stellmond Academy Harry Potter RPG</title>
<style type="text/css">
<!--
#contain{
border-left-width:5px;
border-left-color:#556B2F;
border-left-style:double;
border-right-width:5px;
border-right-color:#556B2F;
border-right-style:double;
width:800px;
margin-right:auto;
margin-left:auto;
}
#main{
margin-top:75px;
margin-left:20%;
border-style:solid;
border-color:#556B2F;
border-width:2px;
height:600px;
padding-left:45px;
}
#left{
position:relative;
top:-610px;
background-color:#FFFFFF;
margin-left:5px;
border-style:solid;
border-width:2px;
border-color:#556B2F;
width:24%;
height:200px;
overflow:auto;
}
#right{
position:relative;
top:-550px;
background-color:#ffffff;
margin-left:5px;
height:300px;
border-style:solid;
border-width:2px;
border-color:#556B2F;
width:24%;
}
img {margin-right:auto;margin-left:auto;}
//-->
</style>
</head>
<body>
<div id="contain">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.stellmond.com/silver.gif" alt="Stellmond Academy Harry Potter RPG" width="800" height="200"/>
<div id="main">
Blah Blah Blah content goes here blahdi blahdi blah doodley-doo doodly-dee snark snark snark snark snarkily snark snark
</div>
<div id="left">
<ul>
<li>Navigation goes here</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/rules.html">Rules</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/char.html">Character Creation</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/faq.html">Frequently Asked Questions</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/register.php">Register</a></li>
<li>And so on.</li>
</ul>
</div>
<div id="right">
This is right content :0
</div>
</div>
</body>
</html>Woot. Thank you, I appreciate it ^__^
I'm not very experienced in making table-less layouts, and this is my first time actually trying absolute or relative positioning in a layout, so if this is something obvious forgive me. Everything was going well until I decided I better move the main div up a couple hundred pixels. I added position:relative;top:-150px; to the style, and IE moved the div up 150 pixels but on Firefox it completely disappeared off the page. I tried a few different values for top, both positive and negative. Then I just got rid of top and had only position:relative and it was still gone. It isn't until I remove it that that it returns.
So, my question is: Why?
By the way, this is how its supposed to look:
<!-- m --><a class="postlink" href="http://www.stellmond.com/diagram.gif">http://www.stellmond.com/diagram.gif</a><!-- m -->
And the page where I'm testing this is here:
<!-- m --><a class="postlink" href="http://www.stellmond.com/test.html">http://www.stellmond.com/test.html</a><!-- m -->
Thanks in advance.<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Stellmond Academy Harry Potter RPG</title>
<style type="text/css">
<!--
#contain{
border-left-width:5px;
border-left-color:#556B2F;
border-left-style:double;
border-right-width:5px;
border-right-color:#556B2F;
border-right-style:double;
width:800px;
margin-right:auto;
margin-left:auto;
}
#main{
margin-top:75px;
margin-left:20%;
border-style:solid;
border-color:#556B2F;
border-width:2px;
height:600px;
padding-left:45px;
}
#left{
position:relative;
top:-610px;
background-color:#FFFFFF;
margin-left:5px;
border-style:solid;
border-width:2px;
border-color:#556B2F;
width:24%;
height:200px;
overflow:auto;
}
#right{
position:relative;
top:-550px;
background-color:#ffffff;
margin-left:5px;
height:300px;
border-style:solid;
border-width:2px;
border-color:#556B2F;
width:24%;
}
img {margin-right:auto;margin-left:auto;}
//-->
</style>
</head>
<body>
<div id="contain">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.stellmond.com/silver.gif" alt="Stellmond Academy Harry Potter RPG" width="800" height="200"/>
<div id="main">
Blah Blah Blah content goes here blahdi blahdi blah doodley-doo doodly-dee snark snark snark snark snarkily snark snark
</div>
<div id="left">
<ul>
<li>Navigation goes here</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/rules.html">Rules</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/char.html">Character Creation</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/faq.html">Frequently Asked Questions</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/register.php">Register</a></li>
<li>And so on.</li>
</ul>
</div>
<div id="right">
This is right content :0
</div>
</div>
</body>
</html>Woot. Thank you, I appreciate it ^__^