Positioning a child div element within its parent container div's border only
<p>I have a child div who is nested inside a parent container div. The parent div has  its own left, right, top, bottom, width, height, paddings (top, right, bottom, left), and margins (top, right, bottom, left) CSS properties. </p>

<p>The child div also has its own left, right, top, bottom, width, height, paddings (top, right, bottom, left), and margins (top, right, bottom, left) CSS properties. </p>

<p>On the page there are also 12 text boxes so users can change child div's CSS properties such as width, height, top, left, margins (left, right, top, bottom), and paddings (left, right, top, bottom).  However, I expect users to enter only values that let the child div move inside the borders (left, right, top, bottom) of the parent container div only.</p>

<p>Anytime, after user input a value for a text box, press Tab key (on blur event happens for that text box), then a Javascript funtion named textBoxVerifyUserInput_Blur(this) is called.  Please see the code below.</p>

<p><em>*</em>  The child div is moving (on the fly) whenever the VALID values are entered in the text boxes. Otherwise, users should see the alert message for a VALID input for a certain text box.</p>

<pre><code>&lt;div id="divParent" style="width: 500px; height: 400px; top: 100px; left: 50px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; "&gt; 
  &lt;div id="divChild" style="width: 400px; height: 300px; top: 10px; left: 5px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; margin-top: 8px; margin-right: 8px; margin-bottom: 8px; margin-left: 8px; "&gt; &lt;/div&gt;

&lt;/div&gt;

&lt;div id="divInputsForChildDiv"&gt;
   &lt;label&gt;12 text boxes for child div property changes&lt;/label&gt;
   &lt;br/&gt;
   Child width: &amp;nbsp;&lt;input type="text" id="textboxChildWidth" onblur="textBoxVerifyUserInput_Blur(this);" /&gt;
   &lt;br/&gt;
   Child height: &amp;nbsp;&lt;input type="text" id="textboxChildHeigth" onblur="textBoxVerifyUserInput_Blur(this);" /&gt;
   &lt;br/&gt;
   ...
    Child margin-left: &amp;nbsp;&lt;input type="text" id="textboxChildMarginLeft" onblur="textBoxVerifyUserInput_Blur(this);" /&gt;

&lt;/div&gt;

&lt;script language="javascript"&gt;
     function textBoxVerifyUserInput_Blur(textbox)
     {
         /* 


    I need the logic over here to be sure that if user input for a text box makes
 the child div going out of the border of the parent div, then alert the user that that 

value is invalid. User sees the alert and then he/she must re-input other value and the 

verification process runs again to check  user input UNTIL  a valid input is entered for this text box.  

If next input is VALID, this function accepts that input, and then the user 

is able to move to ANOTHER text box for another child div CSS property.
         */

      }

     var inputValue = $(this).val();
     if( inputValue makes the child div moving out the parent div borders)  then
        alert('Your input value is invalid, please re-enter');
     else
        accept that input value and let user move to another text box
&lt;/script&gt;
</code></pre>

<p>I would like to have an approach or formula using client side codes (jQuery) for the textBoxVerifyUserInput_Blur() function as above to prevent the child div from moving out of the parent div. Please help.</p>

<p>Thanks in advance</p>
