CSS Positioning or DW Problem?

Question

I am having difficulty with CSS positioning after spending several hours reading and trial and error.  I am beginning to think that Dreamweaver is broken, and thoughts of reloading are crossing my mind.
My desire is to have a background image "beneath" my page wrap div, essentially acting as a border surrounding it.  I have assigned the position to this image "background" as relative, and therefore assigned the positioning of my page wrap div as absolute.  The page wrap has been given a background color, and a line of text to enable me to "see" where I am in securing the proper placement. I would think that the background color of the page wrap div would "show" but it is not. (?)
I have positioned my palette, as we will call it, with margins, while attempting to place my page wrap using top, right, bottom and left through the CSS dialog box.  Regardless of values used, the div remains in the bottom left hand corner of the browser window and refuses to budge.
#palette {
    background: url(images/pallete.png) no-repeat;
    width: 1200px;
    height: 1400px;
    margin: 100px auto;
    position: relative;
#page wrap {
    position: absolute;
    background: #C06;
    height: 1100px;
    width: 960px;
    top: 100px;
    right: -120px;
It has gotten so that any changes I make to the CSS at this stage will not even trigger a Refresh of the CSS styles panel?  What gives?
Thanks.

Answer 1

I've never used "Live Code" before, and was able to place #page more to my liking, but it is a ballpark position so to speak, I can only approximate it's center within #palette.  I begin to think I have success, until I go to browser view, where #page position seems to shift.
You are trying to use HTML like a word processor and that's the absolute (no pun intended) wrong approach!
An absolutely positioned element's location is calculated from the location of its nearest positioned ANCESTOR.  An "ancestor" is a containing element, not an adjacent element (which would be a 'sibling').  Thus, if you want your absolutely positioned element to key off of the location of a relatively positioned element, it must be a child (or descendent) of that relatively positioned element.  In other words, to make #page work relative to #palette, it must be inside #palette.
If there are alternatives to securing positioning other than my current method, I would be interested to learn about it.  I am not aware of the drawbacks mentioned with employing this type of positioning, could you provide some detail please?
There is an excellent alternative without using positioning at all - it's called 'best practice'!   The disadvantages of using absolute positioning for everything are:
1.  Because absolutely positioned elements are removed from the flow of code on the page, they are immune to shifts in other non-positioned page elements due to browser viewport size changes, or text display size changes.
2.  Since #1 is the case, and since text display size changes may cause the height of the container to change, if that container is absolutely positioned, its contained text may overlap other content on the screen.  The more absolutely positioned text containers there are the worse this effect becomes, quickly producing an unusable, overlapping mess.
3.  Absolutely positioned elements are located on the screen without regard for where the elements appear in the code, and as a result, it's quite possible to have two bits of text that only make semantic sense when taken as a unit separated by quite a bit of code, perhaps even other text bits.  Thus, pages built with absolutely positioned text containers are usually not semantically sensible, meaning that they would not fare well when run through a screen assistive device.
4.  Considering all of these things, pages that contain both centering elements and positioned elements frequently go wandering as viewport widths are changed.
The upshot is that the method most likely to be chosen by an inexperienced user because of its apparent simplicity is also the absolute worst possible approach to building the page.
Oh, by the way, the values for positioning below were obtained through "dragging" div=page into position.  I would rather not use Live Code, but plug in concrete values in the future.
The word processing approach in action!  The only way to achieve plugging in concrete values is to have a layout already planned on paper before you start.
Say more about how you want your page to look (I'm not sure what you mean exactly about centering #page "above" #palette, but if you mean "before" then consider this -
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, address, blockquote, ul, ol, li {
    margin: 0px;
    padding: 0px;
html {
    background: #3E4A9C url(images/Untitled-2.png) repeat;
body {
    font: 1em Helvetica, Arial, sans-serif;
    color: #000;
    width:1200px;
    margin:0 auto;
#palette {
    background: url(images/map.png) no-repeat;
    margin: 100px auto;
#page {
    width: 960px;
    margin:0 auto;
    background-color: #03C;
</style>
</head>
<body>
<div  id="page">This is my page </div><!--End of page-->
  <div id="palette"></div><!--End of palette-->
</body>
(note that I have removed all positioning, as well as all heights - it's generall a bad idea to declare explicit heights on elements that contain text, again due to potential overflow problems)