Why isn't the GridView width expanding 100% across the page when I set the width?

Question

I have the following markup, I took the extra stuff out of the divs, so it is easier to understand. I had my GridView set to 100% with collaspible panel extenders and it was showing fine on the page. Then instead of doing collapsible panel extenders and using accordion panels, the gridview only expands as much as it needs, no matter what I set the width to. Here is the markup below:

<div>
    <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
                   HeaderCssClass="collapsePortfolioHeader"
                   FadeTransitions="true" 
                   FramesPerSecond="40" 
                   TransitionDuration="250" 
                   AutoSize="None">
        <Panes>
            <cc1:AccordionPane runat="server">
                <Header>
                    Create Portfolio</Header>
                <Content>
                    <br />
                    <div style="height: 290px;">
                        <div style="float: left; width: 250px; 
                                    margin-right: 75px;">
                        </div>
                        <div style="float: left; width: 250px;">
                        </div>
                        <div style="float: left; width: 70px; 
                                    margin: 5px;">
                        </div>
                        <div style="float: left; width: 250px; 
                                    margin: 5px;">

                        </div>
                        <div class="clear"> //just a clear both;
                        </div>
                    </div>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane runat="server">
                <Header>
                    Create Portfolio By Location</Header>
                <Content>

                    <div style="height: 150px;">
                        <div style="float: left; width: 170px; 
                                    margin: 5px;">

                        </div>
                        <div style="float: left; 
                                    margin-right: 5px;">
                        </div>
                        <div style="float: left; width: 250px;
                                    margin-right: 5px;">

                        </div>
                        <div style="float: left; width: 70px; 
                                    padding-top: 100px;">
                        </div>
                        <div style="float: left; width: 250px; 
                                    margin-left: 15px;">

                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </Content>
            </cc1:AccordionPane>
        </Panes>
    </cc1:Accordion>
</div>

<div class="grid"> //the grid class just has margin:0;
// GridView goes here
</div>

Answer 1

Xaisoft,

Not sure what is different in your environment. But I took the code that you have pasted in your question, added a grid view, filled it with some test data and set the width to 100% and it spanned across the page. The only thing I can think of is there is something in your CSS that might be causing it. The fact that it works on different pages means that it might not be the CSS (hmmm). Possibly something local to this page?

I don't think it has anything to do with the Accordian.

Take a look at the copied code below, this is what I have in my test project and it worked.

I would recommend starting with a fresh page with no CSS and going from there. Without seeing your entire CSS this will be difficult to answer.

<div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="collapsePortfolioHeader"
                FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>
                            Create Portfolio</Header>
                        <Content>
                            <br />
                            <div style="height: 290px;">
                                <div style="float: left; width: 250px; margin-right: 75px;">
                                </div>
                                <div style="float: left; width: 250px;">
                                </div>
                                <div style="float: left; width: 70px; margin: 5px;">
                                </div>
                                <div style="float: left; width: 250px; margin: 5px;">
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>
                            Create Portfolio By Location</Header>
                        <Content>
                            <div style="height: 150px;">
                                <div style="float: left; width: 170px; margin: 5px;">
                                </div>
                                <div style="float: left; margin-right: 5px;">
                                </div>
                                <div style="float: left; width: 250px; margin-right: 5px;">
                                </div>
                                <div style="float: left; width: 70px; padding-top: 100px;">
                                </div>
                                <div style="float: left; width: 250px; margin-left: 15px;">
                                </div>
                                <div class="clear">
                                </div>
                            </div>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
        </div>
        <div class="grid">
            <asp:GridView ID="GridView1" runat="server" Width="100%">
            </asp:GridView>
        </div>