I have produced the following code so that all div tags mmove with the browser[HTML]<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>[/HTML]
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?

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?

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.
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.

The[HTML]p { margin: 0 auto;
padding: 0; } [/HTML]
seems to have helped thanks!