mozilla firefox problem with text in div tag

[bazmanblue]

I have produced the following code so that all div tags mmove with the browser

<style type="text/css">
<!--
#Layer1 {
 width:800px;
 height:800px;
 margin:auto auto;
 overflow: hidden;
}
#Layer2 {
 position:relative;
 width:501px;
 height:115px;
 z-index:1;
 left:280px;
 bottom:780px;
 background-color: #FFFFFF;
}
#Layer3 {
 position:relative;
 width:250px;
 height:115px;
 z-index:2;
 left:20px;
 bottom:895px;
 background-color:#FFFFFF;
}
#Layer4 {
 position:relative;
 width:250px;
 height:625px;
 z-index:3;
 left: 20px;
 bottom: 880px;
 background-color:#FFFFFF;
 text-align:left;
}
#Layer5 {
 position:relative;
 width:501px;
 height:625px;
 z-index:4;
 left: 280px;
 bottom: 1505px;
 background-color:#FFFFFF;
}
-->
</style>

I'm finding that when i insert text in the child div tags that the whole child div tag moves down the screen for some reason in mozzilla firefox. can anyone help me with this?

[tgreer]

It's likely related to "relative" positioning. The position of the element is relative to the content of the parent element. I explain positioning in this article.

Can you post your HTML, as well?

[bazmanblue]

Maybey i should just give up on the whole margins being center on the browser.
If there was just one browser it would be fine.:sad:
If i have no margin:auto auto i think i will be alright with text. I will show you my website once its finished to show you what i have been trying to do.

The problem with css is that if somone changes something in the view panel like text size it can mess a whole page up and the text might run over something else.

[bazmanblue]

The

p      { margin: 0 auto;        
padding: 0;      }

seems to have helped thanks!