Multiple Buttons on Dialog Title Alignment Issue

Multiple Buttons on Dialog Title Alignment Issue

Hi jQuery Forum,
I've got a feeling I'm going to get slated here, so I will appolgise in advance, I've managed to get multiple buttons added to the title title bar of a dialog, however I'm having the problem that the width of the text area is set to 90%, if I reduce this everything works find but if I then shrink the dialog the text area bumps into the icons and causes an overflow.

There is probably a simple solution in the CSS to say size the width dialog less the size of the icons but I'm not sure how to do this, can anyone help.

For those who are interested here is how I added the buttons, the dialog is created from another dialog:

  1.  jQuery('#add_dialog').dialog({
               autoOpen:false,
               height:300,
               width:350,
               modal:true,
               buttons: {
                   "Create Group": function() {
                       var bValid = true;
                       allFields.removeClass( "ui-state-error" );
                        bValid = bValid && checkLength( add_name, "Name", 1, 75 );
                        if (bValid) {
                            /* Create Dialog */
                            jQuery('#main').append("<DIV style='width:150px; height:100px' class='statusdiv'>Hello</DIV>");
                            jQuery('.statusdiv').dialog({
                                show: "fold",
                                resizable: true,
                                draggable: true,
                                appendTo: '#statusmap',
                                title: add_name.val(),

                                beforeClose:function(){
                                    return confirm('Are you sure you wish to delete this dialog?');
                                },
                                close:function(){
                                    jQuery(this).remove();
                                },
                                create: function() {
                                     /* Add additional buttons to title */
                                    jQuery(this).prev('.ui-dialog-titlebar').find('.ui-dialog-title').after('<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only titlebutton" role="button" aria-disabled="false" title="Add"><span class="ui-button-icon-primary ui-icon ui-icon-plusthick" style="right: 24px;"></span><span class="ui-button-text">Add</span></button>' +
                                    '<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only titlebutton" role="button" aria-disabled="false" title="Add"><span class="ui-button-icon-primary ui-icon ui-icon-pencil" style="right: 48px;"></span><span class="ui-button-text">Edit Group</span></button>');
                                }
                            });
                            /* Clear Down Dialog */
                            allFields.val("");
                            jQuery(this).dialog("close");
                        }
                   },
                   "Cancel": function() {
                       jQuery(this).dialog("close");
                   }
               },
            }).on('keypress', function(e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 13) { //Enter keycode
                    jQuery('.ui-dialog-buttonpane button:contains("Create")').click();
                    return false;
                }
            });
















































90% on a small dialog causes things to squash up


90% on a wide dialog is ok

Thanks in advance and sorry if its a really easy thing to sort out, live and learn.  I did try hunting the internet but couldn't find anything.