title: How to make my a scalable website with auto:height and overflow:auto
body: <p>I'm trying to make a site that will be vertically scalable so that modules can be added and the size of the page will adjust. I've been trying to achieve this by playing with absolute positioning, auto height, and auto overflow. The problem is that it seems at some point you have to define at least one height...and once that happens the site is no longer completely scalable. In my code below you can see that it's all basically scalable until you get to the container (which is collapsed). This div's main purpose is to center all of the content on the page, then the content is absolutely positioned inside. I don't want to give the container a height, but it's just not acknowledging the content inside. How can I make this work?</p>
  
  <p>ps.The crazy colors are just for building and testing.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id = "contentHolder"&gt;
          &lt;div id="header" &gt;
              &lt;h1&gt;This is a heading&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="moduleContainer"&gt;
              &lt;div id= "myModule"&gt;
                  &lt;div id= "moduleHeader"&gt;
                      &lt;p class="p1"&gt;Who We Are 
                      &lt;span class="p2"&gt;Learn more about Trinity&lt;/span&gt;&lt;/p&gt;
                      &lt;/div&gt; 
                      &lt;div id= "moduleBody" &gt;
                      &lt;p class="p3"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tempus hendrerit.
                       Mauris sed felis vel orci bibendum semper vel eget tortor. Ut adipiscing interdum tellus ac pulvinar. 
                       Suspendisse sit amet hendrerit lectus. In felis felis, venenatis luctus varius ut, accumsan sit amet tellus. 
                       Integer ac gravida sem. Vivamus orci turpis, tempus sit amet tincidunt ultrices, interdum luctus dolor.
                        Suspendisse sit amet hendrerit lectus. In felis felis, venenatis luctus varius ut, accumsan sit amet tellus. 
                       Integer ac gravida sem. Vivamus orci turpis, tempus sit amet tincidunt ultrices, interdum luctus dolor.
                          &lt;/p&gt;
  
                          &lt;div id="mod_Image" &gt;&lt;img src="churchImg.jpg" style="height:100%; width:100%; "/&gt;&lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;&lt;!---end myModule----&gt;
          &lt;/div&gt;&lt;!---end moduleContent----&gt;
  
          &lt;div id="moduleContainer"&gt;
              &lt;div id= "myModule"&gt;
                  &lt;div id= "moduleHeader"&gt;
                      &lt;p class="p1"&gt;Who We Are 
                      &lt;span class="p2"&gt;Learn more about Trinity&lt;/span&gt;&lt;/p&gt;
                      &lt;/div&gt; 
                      &lt;div id= "moduleBody" &gt;
                      &lt;p class="p3"&gt;
                      The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior. 
                      It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of 
                      God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative 
                          &lt;/p&gt;
  
                          &lt;div id="mod_Image" &gt;&lt;img src="churchImg.jpg" style="height:100%; width:100%; "/&gt;&lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;&lt;!---end myModule----&gt;
          &lt;/div&gt;&lt;!---end moduleContent----&gt;
  
       &lt;/div&gt;&lt;!---end contentHolder----&gt;
  &lt;/div&gt;&lt;!---end container----&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#container 
          {
              text-align:center; 
              margin-left:auto; 
              margin-right:auto; 
              background-color:purple; 
              width:1330px; 
              height:auto; 
              position:relative; 
              padding:20px;
  
          }
  
          #contentHolder 
          { 
              width:1200px; 
              height:auto; 
              background-color:green;         
              padding:40px; 
              position:absolute; 
              top:20px; 
              left:20px;  
              overflow:auto;
          }
  
          #header
          {
              width:100%; 
              height:200px; 
              background-color:yellow; 
              overflow:auto;
          }
  
          #moduleContainer 
          {
              width:1200px; 
              height:auto; 
              background-color:red; 
              float:left; 
              overflow:auto; 
              padding-bottom:40px;
              border-bottom:thin dashed white;
          }
  
          #myModule
          {
              height:auto;  
              width: 1000px; 
              overflow:auto;
          }
  
          #moduleHeader 
          {
              width:100%; 
              height:auto; 
              overflow: auto;
          }
  
          #moduleBody 
          {
              background-color:#0E1031; 
              width:800px; 
              height:auto; 
              margin-left:auto; 
              margin-right:auto; 
              padding:40px;
              border:thick solid #1B1851;  
              border-radius: 15px; 
              overflow: auto;
          }
  
          #mod_Image 
          {
              height:200px; 
              width:200px;
              margin-left:40px; 
              float:left; 
              border:thick solid white;
          }
  
          .p1
          {
              text-align:left; font-family:Arial; font-size:22px; font-size:30px; color:#191970;margin-left:80px;"
          }
  
          .p2
          {
              color:#999; font-size:20px; font-weight:bold;
          }
  
          .p3
          {
              text-align:justify; height:150px; width:500px;   font-family:Arial; font-size:14px; line-height:150%; float:left; color:white; 
          }
          h1 
          {
              text-align:left; padding:60px; color:green;
          }
  </code></pre>