CJuiDatePicker not displaying in correct position

Hello,

If I have my body tag as such:


<body style="width:screen.width; left:50%; margin:0px auto; padding:0px; background:#1f1f1f; position:absolute;" onload="$('#yw2').click(); $('#yw0').click();">

then the calender appears out of position. The input text appears where it should.

If I make the site left aligned:


<body style="margin:0px auto; padding:0px; background:#1f1f1f; position:absolute;" onload="$('#yw2').click(); $('#yw0').click();">

then the calender and input text both appear in correct position.

Below is the code for the widget:


<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array('model'=>$model_np,

 							          'attribute'=>'dob',

                                                                  'options'=>array('dateFormat'=>'dd/mm/yy',

                                                                                   'minDate'=>User::minDOBDate(),

                                                                                   'maxDate'=>User::maxDOBDate(),

                                                                                   'changeYear'=>true,

                                                                                   'yearRange' => '-150:-18',

                                                                                   'changeMonth' => true,),

                                                                   'htmlOptions'=>array(),)); ?></div>

If I include the following option:


'flat'=>'true',

then the calender displays correct. I want to have the calender and input text. What am I doing wrong?