Member Avatar for 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?

  • 2 Contributors
  • 3 Replies
  • 113 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by bazmanblue

Dani AI

Generated

Short summary and quick cause: was on the right track about positioning, and ’s fix (resetting paragraph spacing) exposes the real culprit: vertical margin collapse combined with using relative offsets. A relatively positioned element is still in the normal flow, so its offsets are applied from its normal position; if the first child has a top margin it can “collapse” into the parent and make the whole block appear to move when you add text. Using large bottom offsets on relatively positioned children makes the layout brittle.

Practical fixes (ordered from least to most invasive):

  • Reset default top/bottom margins for paragraphs and headings (or use a small CSS reset). That often fixes the symptom immediately.
  • Prevent margin collapse on the parent by giving it padding, a transparent border, or setting overflow: auto (creates a new block formatting context).
  • Stop using position: relative + big bottom values for layout. Instead make the container position: relative and absolutely position children (they’re taken out of the flow and won’t be pushed by inner content). For modern layouts prefer floats, Flexbox or Grid rather than many absolutely positioned blocks.

Troubleshooting checklist:

  • Use the browser inspector to view computed margin-top on the child and check whether that margin is affecting the parent.
  • Temporarily remove offsets to see how elements behave in normal flow.
  • Test with larger fonts / zoom to ensure the layout is robust.

Example pattern (keeps children stable inside a centered wrapper):

#wrap { position: relative; }

.layer { position: absolute; top: 40px; left: 20px; }

This keeps the wrapper as the containing block and prevents inner text changes from shifting other positioned layers.

Recommended Answers

All 3 Replies

Member Avatar for 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 .

Can you post your HTML, as well?

Member Avatar for 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.

Member Avatar for bazmanblue

The

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

seems to have helped thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.