0 Replies Latest reply on Aug 16, 2009 12:13 AM by David_Powers

    Why do my AP Divs (layers) move when I resize the browser window?

    David_Powers Adobe Community Professional

      They don't move!


      An AP Div (or layer in older versions of Dreamweaver) is an absolutely positioned element. When you insert an AP Div, and set its position to top: 100px and left: 50px, it places the div 100px from the top of the page and 50px from the left. It stays in that position, and never moves regardless of how big or small you make the browser window.


      But I can see it moving!


      No, you can't. The important thing to understand about absolutely positioned elements is that the browser removes them from the normal flow of the document, and floats them above the rest of the page. What you see is an optical illusion. The AP Div remains where you put it, but the browser reflows everything outside the absolutely positioned element when you resize the window. Absolutely positioned elements do not interact with other elements on the page. As a result, an image that you think you have nicely positioned with an AP Div will overlap other elements when viewed on a bigger or smaller monitor.


      Using AP Divs for page layout is a poor strategy. See Gary White's excellent Page Layout 101 for more details. The article was written several years ago, and refers to layers rather than AP Divs, but is still relevant. The only difference between AP Divs and layers is that AP Divs put the CSS in a <style> block in the <head> of the page, rather than in the opening <div> tag. Apart from that, they behave identically.