css преоразмеряване на div контейнер, за да пасне на малки прозорци

Проблемът ми е, че контейнерът няма да преоразмери, за да пасне на по-малки екрани или когато размерът на прозореца се свие. Опитах метода на процентите, където зададох височина/ширина на 100% или дори 50%, контейнерът изчезва. След като прекарах седмици в това, не стигнах абсолютно никъде. Има изискване да се поддържа и IE6, което ме вкарва в главата.

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

Ето html за моята уеб страница. Съкратих го само за да покажа структурата на първия елемент (премахнах съдържанието си)

        <div class="container">                
            <div></div>
            <div id="ca-container" class="ca-container">
                <div class="ca-wrapper">
                    <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                            <div class="ca-icon"></div>
                            <h3></h3>
                            <h4></h4>
                            <a href="/bg#" class="ca-more">Read...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">
                                <h6></h6>
                                <a href="/bg#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p>xxxxxxxx </p>

                                </div>
                            </div>
                        </div>
                    </div>

Оригиналният плъгин е въртележката с кръгово съдържание: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

Разбрах, че оригиналният плъгин не прави това. Ако кодът ми е твърде объркан, моля, проверете приставката и решете проблема с демо източника.

Всяка помощ ще бъде високо оценена - Благодаря!