adjusting ajax asp accordion sizes

Question

I'm very unfamilar with accordion and exactly how to use them, i'm trying to adjust the width of the accordion, how/what is the easier way to do that, i'm using the sample css that came with it, but i do not see any width adjustment.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
<asp:Accordion ID="MyAccordion" runat="server" 
                       SelectedIndex="0" 
                       HeaderCssClass="accordionHeader" 
                       ContentCssClass="accordionContent" 
                       FadeTransitions="true" 
                       FramesPerSecond="40" 
                       TransitionDuration="250"
                       AutoSize="None">
 <Panes>
      <asp:AccordionPane ID = "AccordionPane1" runat = "server">
      <Header>
        <a href = "" onclick = "return false;" class = "accordionLink"> Section 1</a>
      </Header>
      <Content>
        <p>Thi</p>
      </Content>
    </asp:AccordionPane>

    <asp:AccordionPane ID = "AccordionPane2" runat = "server">
      <Header>
        <a href = "" onclick = "return false;" class = "accordionLink"> Section 2</a>
      </Header>
      <Content>
        <p>Joe</p>
      </Content>
    </asp:AccordionPane>

    <asp:AccordionPane ID = "AccordionPane3" runat = "server">
      <Header>
        <a href = "" onclick = "return false;" class = "accordionLink"> Section 3</a>
      </Header>
      <Content>
        <p>So keep yoow Micro</p>
      </Content>
    </asp:AccordionPane>

    <asp:AccordionPane ID = "AccordionPane4" runat = "server">
      <Header>
        <a href = "" onclick = "return false;" class = "accordionLink"> Section 4</a>
      </Header>
      <Content>
        <p>>test</p>
      </Content>
    </asp:AccordionPane>
 </Panes>
 </asp:Accordion>


.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.accordionLink
{
 background-color: #D3DEEF;
    color: white;
}

.watermark {
    background: #FFAAFF;
}

.popupControl {
    background-color:#AAD4FF;
    position:absolute;
    visibility:hidden;
    border-style:solid;
    border-color: Black;
    border-width: 2px;
}

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}

.sampleStyleA {
    background-color:#FFF;
}

.sampleStyleB {
    background-color:#FFF;
    font-family:monospace;
    font-size:10pt;
    font-weight:bold;
}

.sampleStyleC {
    background-color:#ddffdd;
    font-family:sans-serif;
    font-size:10pt;
    font-style:italic;
}

.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}

Answer 1

You could create a container for the accordion and by giving it a width that will also set the accordion's width. Something like:

<div id="divAccordionContainer" style="width:500px">
    <ajaxToolkit:Accordion ID="MyAccordion" runat="Server">
        ...
    </ajaxToolkit:Accordion>
</div>