Resizable set on parent but child extends beyond parents bottom and right sides
Hi,
I'm trying the use the jquery ui resizable() on a div that contains
child divs as in the code below.
The problem is that when the parent is resized, the child extends
beyond the right and bottom sides of the parent. I'm wondering if
there is a workaround or if I am not setting up correctly.
Thanks!!
Chris
<div id="divOut" style='background-color: #ccc'>
<div id='divHeader' style='margin: 2px 4px 6px
4px'>Header</div>
<div id="divContent" style='height: 100%; width: 100%;
background-color: #888;
margin: 4px 4px 4px 4px; padding: 4px 4px 4px
4px;'>
Contents line 1<br />
Contents line 2<br />
Contents line 3<br />
</div>
</div>
<script type="text/javascript">
$(function() {
$('#divOut').resizable();
});
</script>