title: css resizing div container to fit small windows
body: <p>My problem is that the container will not resize to fit smaller screens or when the window size shrinks. I have tried the percentage method, where I set height/width to 100% or even 50%, the container disappears. After spending weeks on this, I have got absolutely no where. 
  There is a requirement to support IE6 as well, which drives my head in.</p>
  
  <pre><code>.ca-container{
   position:relative;
   margin:-45px auto 20px auto;
   width:990px;
   height:500px; 
  }
  
  .ca-wrapper{
   width:100%;
   height:100%;
   position:relative; 
  }
  
  .ca-more{
   position: absolute;
   bottom: 10px;
   right:0px;
   padding:4px 15px;
   font-weight:bold;
   background: #000;
   text-align:center;
   color: white;
   font-family: "Georgia","Times New Roman",serif;
   text-shadow:1px 1px 1px #897c63;    
  }
  
  .ca-item{
  position:relative;
  float:left;
  width:330px;    
  height:100%;
  text-align:center; 
  }
  
  .ca-item-main{
  
   padding:20px;
   position:absolute;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   background:#fff;
   overflow:hidden;
   -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
   -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
   box-shadow:1px 1px 2px rgba(0,0,0,0.2);
  }
  </code></pre>
  
  <p>Here is the html for my webpage. I have truncated it just to show the structure of the first item (I have removed my content)</p>
  
  <pre><code>        &lt;div class="container"&gt;                
              &lt;div&gt;&lt;/div&gt;
              &lt;div id="ca-container" class="ca-container"&gt;
                  &lt;div class="ca-wrapper"&gt;
                      &lt;div class="ca-item ca-item-1"&gt;
                          &lt;div class="ca-item-main"&gt;
                              &lt;div class="ca-icon"&gt;&lt;/div&gt;
                              &lt;h3&gt;&lt;/h3&gt;
                              &lt;h4&gt;&lt;/h4&gt;
                              &lt;a href="#" class="ca-more"&gt;Read...&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="ca-content-wrapper"&gt;
                              &lt;div class="ca-content"&gt;
                                  &lt;h6&gt;&lt;/h6&gt;
                                  &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                                  &lt;div class="ca-content-text"&gt;
                                      &lt;p&gt;xxxxxxxx &lt;/p&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>The original plugin is the circular content carousel: <a href="http://tympanus.net/codrops/2011/08/16/circular-content-carousel/" rel="nofollow">http://tympanus.net/codrops/2011/08/16/circular-content-carousel/</a></p>
  
  <p>I have realised the original plugin does not do that. If my code is too messy, please check out the plugin and solve the issue with the demo source.</p>
  
  <p>Any help will be greatly appreciated - Thanks!</p>