css - 折りたたみパネルが展開されているときに要素の幅を変更するにはどうすればよいですか?

Question

Visual Studio に付属の Web アプリケーション テンプレートを使用しています。メイン コンテンツを他の 2 つのコンテンツ プレース ホルダーに分割する入れ子になったマスター ページを追加しました。どちらも、幅を制御するために css スタイルが適用された div でラップされています。1 つは、このネストされたマスター ページから継承する各ページのメイン コンテンツ領域として使用され、もう 1 つのコンテンツ プレース ホルダーは、左から右に展開および折りたたむことができるサイド パネルとして使用されます。このサイド パネルは、ほとんどのページで永続的に表示されます。そのため、コンテンツ プレース ホルダー内にあり、それを必要としないページでカスタム コンテンツを作成し、空白のままにするか、他のデータを使用することができます。この機能は ajax の折りたたみ可能なパネル エクステンダで実現されていますが、メイン コンテンツ領域のサイズは幅が固定されています。私の CSS では、メイン コンテンツ領域に max-width と min-width を設定しましたが、min-width にしか設定されません。css のドキュメントを読んで、min-width プロパティが max-width および width プロパティをオーバーライドすることを発見しました。私の質問は、サイド パネルが折りたたまれたときにメイン コンテンツ領域の幅が 95% になり、サイド パネルが展開されたときに幅が 75% になるようにするにはどうすればよいですか? 考えられる限り多くの関連情報を含めようとしましたが、さらに必要な場合は喜んで提供します。私の質問は、サイド パネルが折りたたまれたときにメイン コンテンツ領域の幅が 95% になり、サイド パネルが展開されたときに幅が 75% になるようにするにはどうすればよいですか? 考えられる限り多くの関連情報を含めようとしましたが、さらに必要な場合は喜んで提供します。私の質問は、サイド パネルが折りたたまれたときにメイン コンテンツ領域の幅が 95% になり、サイド パネルが展開されたときに幅が 75% になるようにするにはどうすればよいですか? 考えられる限り多くの関連情報を含めようとしましたが、さらに必要な場合は喜んで提供します。

ネストされたマスター ページからの関連するマークアップ

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div style="width: 100%; height: 100%;">
    <div class="leftSidePanel">
    <asp:ContentPlaceHolder ID="LeftSidePanelContent" runat="server">        
        <asp:Panel ID="Panel2" runat="server" CssClass="collapseLeftSidePanelHeader" >
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/CollapsiblePanel/expand_blue.jpg" AlternateText="(Show Details...)" />
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" CssClass="collapseLeftSidePanel" >
            <br />

            <asp:Label ID="Label1" runat="server" Text="MY PANEL"></asp:Label>
            </asp:Panel>
            <ajax:collapsiblepanelextender ID="cpeLeftSidePanel" runat="Server"
                ExpandedSize="250"
                CollapsedSize="0"
                ExpandDirection="Horizontal"
                TargetControlID="Panel1"
                ExpandControlID="Panel2"
                CollapseControlID="Panel2"
                Collapsed="True"
                TextLabelID="Label1"
                ImageControlID="Image1"
                ExpandedImage="~/Images/CollapsiblePanel/collapse_blue.jpg"
                CollapsedImage="~/Images/CollapsiblePanel/expand_blue.jpg"
                SuppressPostBack="true" />
    </asp:ContentPlaceHolder>
    </div>
    <div class="mainPanel">
        <asp:ContentPlaceHolder ID="MainPanelContent" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</div>

関連する css: 折りたたみパネルの幅は、折りたたみ可能なパネル エクステンダーで設定されます。

.main
{
    padding: 0em 1em;
    margin: 1em;
    width: 100%;
    min-height: 420px;
    border: thin solid black;
}

.mainPanel{
    max-width: 90%;
    min-width: 75%;
    height: 100%;
    float:right;
    border: thin solid green;
}

.leftSidePanel{
    min-width: 0;
    max-width: 20%;
    height: 100%;
    float: left;
    border: thin solid blue;
}


.collapseLeftSidePanelHeader{
    width:30px;
    height:100%;
    background-repeat:repeat-y;
    background-color: AliceBlue;
    font-weight:bold;
    float: right;
}

.collapseLeftSidePanel {
    background-color:black;
    overflow:hidden;
    width:0;
    height: 100%;
}