Parent container size

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

HTML

<link rel="stylesheet" href="https://sites.google.com/site/fastenyourseatbeltpic/jquery/css/cupertino/jquery-ui-1.8.16.custom.css">
<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>

CSS

#parent {
    width: 400px;
    border: 1px solid black;
}
.left_container {
    position: relative;
    top: 24px;
    left: 10px;
    width: 35%;
}
.right_container {
    position: relative;
    top: -210px;
    left: 150px;
    width: 60%;
}