avoid auto-change of width of jQuery accordion

How can I avoid auto-resizing of jQuery Accordion headers if开发者_运维技巧 I visit content of accordion ?

Script:

<script type="text/javascript" >
    $(document).ready(function() {
      $("#dvAccordion").accordion(
            { autoHeight: false,
                collapsible: true
            }
        );
     });
</script>

Markup:

    <div id="dvAccordion">
    <h5><a href="#fragment1"><asp:Label runat="server" ID="lblAccordionRC" Text="Hi" meta:resourcekey="lblAccordionRC"  ></asp:Label></a></h5>
        <div id="fragment1">
            <div style=" height:10px; width:200%; background-color:Blue;"></div>                
        </div>
    <h5><a href="#fragment2"><asp:Label runat="server" ID="lblAccodionUNC" Text="How"  meta:resourcekey="lblAccodionUNC"></asp:Label></a></h5>               
        <div id="fragment2">
            How are You ?
        </div>        
    </div>

The first accordion contains a wider div than second. If I click on first accordion, a resize of header of accordions takes place. Then If I click second accordion, it shrinks back. It makes a bad visualization of page in end user. How can I remove this auto-resize ?

set the width of the accordion using css

<div id="dvAccordion" style="width:300px;">

for some reason, setting width in html doesn't seem to work properly with the jquery.