title: Dynamically expand div upon hiding another
body: <p>I am new to posting on this site, so please excuse any errors I may make.</p>
  
  <p>So as my question states, I'm essentially looking for a way to dynamically expand divs. So far I have a container div with three columns inside it. Each of the columns have a link to some javascript that sets it to disply:none. What I'm looking for a way to do is, for example, if I was to click the hide button in the center column, I want the two outer columns to expand to take up the space left behind. Perhaps a way to increase the width of the two from 33% each to 50% upon hiding the middle one.</p>
  
  <p>So that the two other divs essentially share the newly created space between them.</p>
  
  <p>Here is my html and css as it is just now:</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="col2outer"&gt;
  
          &lt;div id="col1"&gt;
              &lt;p&gt;test&lt;/p&gt;
              &lt;a href="javascript:hideshow(document.getElementById('col1'))"&gt;Hide&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="col2mid"&gt;
              &lt;p&gt;test&lt;/p&gt;
              &lt;a href="javascript:hideshow(document.getElementById('col2mid'))"&gt;Hide&lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div id="col2side"&gt;
              &lt;p&gt;test&lt;/p&gt;
              &lt;a href="javascript:hideshow(document.getElementById('col2side'))"&gt;Hide&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> #container #col2outer {
   height:200px;
   width: 870px;
   float: left;
   margin: 0;
   padding: 0;
   }
  
   #container #col1 {
   height:200px;
   width: 33%;
   float: left;
   border-width: 0.5mm; border-style: groove;
   -moz-border-radius: 15px;
   border-radius: 15px;
   }
  
  
   #col2outer #col2mid {
   height:200px;
   width: 33%;
   float: left;
   border-width: 0.5mm; border-style: groove;
   -moz-border-radius: 15px;
   border-radius: 15px;
   }
  
   #col2outer #col2side {
   height:200px;
   width: 33%;
   float: left;
   border-width: 0.5mm; border-style: groove;
   -moz-border-radius: 15px;
   border-radius: 15px;
   }
  </code></pre>
  
  <p>Thank you in advance for any help, and apologies if this question has already been asked</p>