How can I resize the width of an element when collapse panel is expanded?

Question

I am using the web application template that comes with visual studio. I have added a nested master page that splits the main content into two other content place holders, both of which are wrapped in divs that have css styling applied to them in an attempt to control their widths. One is used as the main content area for each page that inherits from this nested master page and, the other content place holder is used as a side panel that can be be expanded and collapsed left to right. This side panel will be persistent across most pages. That is why its in a content place holder so that in a page that doesnt need it can create custom content and then just leave it blank or use other data. This functionality has been achieved with the collapsible panel extender from ajax but, the size of the main content area is has a locked width. In my css I set max-width and min-width on the main content area but it only sets it to the min-width. Upon reading css documentation I have discovered that the min-width property overrides the max-width and width properties. My question is How do I get the main content area to be 95% in width when the side panel is collapsed and 75% in width when the side panel is expanded? I've tried to include as much relevant information as I could think of but if more is needed I will gladly provide it.

The relevant markup from my nested master page

<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>

The relevant css: the width for the collapse panel is set in the collapsible panel extender

.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%;
}

Answer 1

I just realized that I could possibly solve this by adding a second collapse panel extender and set it's target control id property to the main panel and have its trigger be the header of the side panel. This way when the side panel is expanded the main panel will collapse and vice versa. I could then use the expand and collapsed sizes to set the 75% and 95% values of the main panel. This seems like a hack to me and i would prefer a more pragmatic solution.