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

i using web application template comes visual studio. have added nested master page splits main content 2 other content place holders, both of wrapped in divs have css styling applied them in attempt control widths. 1 used main content area each page inherits nested master page and, other content place holder used side panel can be expanded , collapsed left right. side panel persistent across pages. why in content place holder in page doesnt need can create custom content , leave blank or use other data. functionality has been achieved collapsible panel extender ajax but, size of main content area has locked width. in css set max-width , min-width on main content area sets min-width. upon reading css documentation have discovered min-width property overrides max-width , width properties. question how main content area 95% in width when side panel collapsed , 75% in width when side panel expanded? i've tried include relevant information think of if more needed gladly provide it.

the relevant markup 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: width collapse panel set in 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%; } 

i realized possibly solve adding second collapse panel extender , set it's target control id property main panel , have trigger header of side panel. way when side panel expanded main panel collapse , vice versa. use expand , collapsed sizes set 75% , 95% values of main panel. seems hack me , prefer more pragmatic solution.