PDA

Click to See Complete Forum and Search --> : Div disappears when adding position:relative to the style

Arqueete
08-18-2004, 05:32 PM
I didn't know how to title this, so I hope that was informative enough :-P

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:

http://www.stellmond.com/diagram.gif

And the page where I'm testing this is here:

http://www.stellmond.com/test.html

Thanks in advance.
crh3675
08-18-2004, 07:00 PM
<!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.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="/rules.html">Rules</a></li>
<li><a href="/char.html">Character Creation</a></li>
<li><a href="/faq.html">Frequently Asked Questions</a></li>
<li><a href="/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>
Arqueete
08-18-2004, 09:36 PM
Woot. Thank you, I appreciate it ^__^