Parent container size

This is to demonstrate what happens when two containers are positioned inside a parent one

by hilbert00

HTML

<link rel="stylesheet" href="https://sites.google.com/site/fastenyourseatbeltpic/jquery/css/cupertino/jquery-ui-1.8.16.custom.css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


</head>

<body>
<style>
#parent {
  width: 400px;
}
.left_container {
  width: 35%;
}
.right_container {
  width: 60%;
}
</style>
<div id="parent" class="ui-widget-content"> 
<div id="big_title" class="ui-widget-header" style="text-align: center;">This is the big title</div>
<div class="left_container"><div id="left" class="ui-widget-header">This is the left header</div>
 <div id="left1" class="ui-widget-content"> This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget</div></div>
<div class="right_container"><div id="right" class="ui-widget-header">This is the right header </div>
 <div id="right1" class="ui-widget-content"> This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget This is the content of the widget</div></div>
</div>

<script>

$(document).ready( function() {
  $('.left_container').position( { of: $('#parent'), my: 'left top', at: 'left top', offset: '10 45' } );
  $('.right_container').position( { of: $('#parent'), my: 'right top', at: 'right top', offset: '-10 45' } );

})

</script>


</body>
</html>