Working the Pane for HTML Magic Edges

You have some style properties in style attributes. The rest of the CSS properties are in the style sheet. This is the style sheet:

<style type="text/css">

body {background-color:#ff9933;padding:0px; margin:0px; z-index:0}

div#Cont {width:209px; height:200px; overflow:hidden; background-color:transparent; border-width:0px; padding:0px; margin:0px; display:inline; vertical-align:top}

div#Calc {position:relative; width:205; height:196px; background-color:brown; border:2px solid brown; padding:0px; margin:0px}

input#CI1 {margin:3px; width:195px; text-align:right; padding:0px; border-width:1px}

button.CalcBut {width:40px; height:40px; padding:0px; margin:0px; border-width:1px}

</style>

The last two statements are for the calculator Input Text element and the calculator buttons. If you have covered the basics, then the rest of the lines should be self-explanatory.

The border width of the outer DIV is 0px. This border does not need to have any width. The user should not even know that the outer DIV exists.

In the previous parts of the series I used a border-width for the purpose of illustration. The CSS position property for the inner DIV element is "relative." This allows it to move (when its position is changed) within the outer DIV.