며칠전 질문올리고 답변을 받아 큰문제는 해결했는데 잘 안풀리는부분이 있어서 질문드립니다.

 

google느님과 stacoverflow에서도 검색해보았지만 제가 구현하려 하는 부분이 마땅치가 않아 글을 쓰게되었습니다. ㅠㅠ

 

안풀리는게 부모 div 안에 자식 div가 여러개인데 자식div는 float:left속성을 준 상태구요

 

자식 div 는 resizable이 되고있는데 리사이즈 시 자식 div의 전체 높이가 부모의 높이를 넘어가지 않도록 해야하는데 막힙니다. ㅠㅠ

 

스크립트는

<>

$(function(){ //DOM Ready
 ;
   $( ".obj" ).resizable({
      containment: 'parent'
  
    });
 
 $( "#container" ).sortable({
      connectWith: ".connectedSortable",
   animate:true
    }).disableSelection();
 
 $(".obj").resizable({
  
      grid: 1,
      minHeight: 100,
      minWidth: 100,
    });

});
</>

 

이렇게 되어있구요

 

html코드는

 

<div id="form">
    <div id="top">머릿말</div>
    <div id="container">
   
          <div id="obj1" class="obj img_item" style="width:100%;">1</div>
          <div id="obj2" class="obj map_item" style="width:38%;">2</div>
          <div id="obj3" class="obj mov_item" style="width:60%;">3</div>
          <div id="obj4" class="obj txt_item" style="width:68%;">4</div>
          <div id="obj5" class="obj txt_item" style="width:30%;">5</div>
   
   
    </div>
    <div id="footer">꼬릿말</div>

</div>

 

이렇게 해놨습니다.

 

float정렬된 모든 obj클래스를 가진 div의 높이 합이 container의 높이를 넘어가지 않게 하려면 어떤방식으로 해봐야할까요?