I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).

My HTML mark up is like: 

```
<section id="mySection" >
  <header id="headerTop">
  </header>
  <div id="wrapperLeft">
  </div>
  <div id="wrapperRight">
  </div>
  <footer id="footerRight">
  </footer>
</section>

```

My CSS is 

```
 #mySection
 {
  margin:0 auto;
  padding:0;
  text-align:center;
  vertical-align:middle;
  overflow:hidden;
 }

 #headerTop
 {
  position:absolute;
  top:0;
  left:0;
  height:40px;
  width:100%;
  overflow:hidden;
 }

 #wrapperLeft
 {
   position:absolute;
   top:40px;
   left:0;
   width:30%;
   bottom:0;
   overflow:auto;
 }

 #wrapperRight
 {
   position:absolute;
   top:40px;
   left:30%;
   width:70%
   bottom:30px;
   overflow:auto;
 }

 #footerRight
 {
    position:absolute;
    left:30%;
    bottom:0;
    width:70%;
    overflow:hidden;
 }

```

I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.

Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width. 

I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.

Thanks in advance for your help.