DatePicker calendar width issue

DatePicker calendar width issue

Please look at my image below to see my issue.The calendar is breaking out of the div / container?

I've put the thick solid red border around it to help show what's really going on (see image below).

  1. I'm loading these in the header:
  2. jquery.js
  1. I also added to my CSS... but this CSS isn't solving the issue below.

    .ui-datepicker {    width: 216px;
        height: auto;
        font: 9pt Arial, sans-serif;
        border: thick solid red;
  1. There is an 'outer div' around the date fields:
    <div style="text-wrap:none; margin:16px 0px 16px 0px;">
  1. <input type="text" name="mydate" id="mydate" size="10" class="DatePickerCalendar">

Date Picker Calendar Width

  1. <script type="text/javascript">
            dateFormat: 'mm\/dd\/yy',
            closeText: "Close",
            dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa']
        }); //DatePickers

    }); //document ready

Thank you for your assistance.