title: Arranging div boxes inside another div box to be flexible for small and large screen widths
body: <p>I'm trying to create a feature to allow users to drag div boxes around and then update the database with the style so when they come back to the page it remembers their positioning and places the boxes in the right spot (relative to the parent div).</p>
  
  <p>I currently have this working, however, if the user positions the boxes using a screen width of say 1600px and then opens the page on say their iPad or a smaller screen size of say 1000px then the boxes dissapear if they are positioned too close to the parent border.</p>
  
  <p>I need some help figuring out how to arrange div boxes inside the parent, but make it so its flexible when they go to a different screen size the boxes will still be there.</p>
  
  <p>I created a jsfiddle to simulate the situation.</p>
  
  <p><a href="http://jsfiddle.net/VN4hw/" rel="nofollow">Jsfiddle link</a></p>
  
  <p>HTML COde:</p>
  
  <pre><code>&lt;div id="dashboard_wrapper"&gt;
    &lt;div class="ui-corner-all border_all_grey dashboard_widget drag_drop"&gt;
      Box 1
    &lt;/div&gt;
    &lt;div class="ui-corner-all border_all_grey dashboard_widget drag_drop"&gt;
      Box 2
    &lt;/div&gt;               
  &lt;/div&gt;
  &lt;div id="box_positions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and JS Code:</p>
  
  <pre><code>$(".drag_drop, .drag_drop_chart").resizable();
  $(".drag_drop, .drag_drop_chart").draggable({
      start: function( event, ui ) {$(this).trigger("click")},
      stop: function ( event, ui ) {
          var position = $(this).position();
          var offset = $(this).offset();
          var top = position.top;
          var left = position.left;
          var max_top = 0;
  
          if(top &lt; 0){ $(this).css({"top":1}); }
          if(left &lt; 0){ $(this).css({"left":1}); }                                    
          if(top &gt; 800){ $(this).css({"top":800}); }
  
          $(".drag_drop, .drag_drop_chart").each(function() {
              //Find the box with the largest "top" value
              var x_top = $(this).position().top;
              if(max_top &lt; x_top){ max_top = x_top; }
          });
  
          var height = max_top + 280;
          $("#dashboard_wrapper").css({"height":height});
  
          var style = $(this).attr("style");
          var box = $(this).text();
          $("#box_positions").append(box + ": style=" + style + "&lt;br/&gt;");
      }
  });
  
  var boxes = $(".drag_drop, .drag_drop_chart");
  
  // Set up click handlers for each box
  boxes.click(function() {
  
      var el = $(this), // The box that was clicked
      max = 0;
  
      // Find the highest z-index
      boxes.each(function() {
          // Find the current z-index value
          var z = parseInt( $( this ).css( "z-index" ), 10 );
          if ( isNaN(z) ){ z = 1; }
  
          // Keep either the current max, or the current z-index, whichever is higher
          max = Math.max( max, z );
      });
  
      // Set the box that was clicked to the highest z-index plus one
      el.css("z-index", max + 1 );
  });
  </code></pre>
  
  <p>Any help and ideas will be appreciated.  Thanks in advance</p>