title: How do I make a DIV tag stretch to the size of it's children?
body: <p>I have a div tag with content in it, and I want it to expand so my footer always follows it. As it is, My content tag isn't expanding, and my footer is overlapping my content. How can I make the div expand and push down my footer?</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head runat="server"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link rel="Stylesheet" href="images/Main.css"" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1" runat="server"&gt;
          &lt;div class="container"&gt;
              &lt;div class="header"&gt;
                  &lt;div class="logo" id="logo"&gt;&lt;/div&gt;
                  &lt;div class="socialNetworkingButtons"&gt; &lt;/div&gt;
                  &lt;div class="languageSelector"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="headerBanner"&gt;&lt;/div&gt;
                  &lt;div class="icons"&gt;&lt;/div&gt;
                  &lt;div class="hr"&gt;&lt;hr /&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="content" id="home"&gt;
                  &lt;div class="videoBox"&gt;&lt;img class="largeBlock" height="500" /&gt;&lt;/div&gt;
                  &lt;div class="description"&gt;&lt;/div&gt;
                  &lt;div class="keyFeatures"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;br class="clear" /&gt;
              &lt;div class="footer"&gt;
                  &lt;div class="copyright"&gt;&lt;p&gt;Here is some text&lt;/p&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code> html, body {
      width: 100%;
      height: 100%;
      font-family: Verdana, Arial, Helvetica, Sans-Serif;
      background: #fff;
      margin: 0;
      padding: 0;
  }
  
  img, div {
      border: none;
  }
  
  span {
      margin:0;
      padding: 0;
  }
  
  a {
      color: #000;
      text-decoration: none;
  }
  
  a:hover {
      color: #000;
      text-decoration: underline;    
  }
  
  .clear {
      clear: both;
  }
  
  /* contains all content on the page */
  .container {
      width: 100%;
      height: 100%;
      position: relative;
      top: 0px;
      clear:both;
  }
  
  /* begin header css */
  .header {
      position: relative;
      top: 0px;
      left: 33px;
      width: 956px;
      height: 290px;
      display: block;
  }
  
  .logo {
      position: relative;
      top: 0px;
      left: 0px;
      width: 143px;
      height: 83px;
  }
  
  .socialNetworkingButtons {
      position: absolute;
      top: 9px;
      left: 836px;
      width: 120px;
      height: 42px;
      text-align:right;
  }
  
  .languageSelector {
      position: absolute;
      top: 51px;
      left: 646px;
      width: 310px;
      height: 32px;
      text-align: right;
  }
  
  .headerBanner {
      position: absolute;
      top: 83px;
      left: 0px;
      width: 956px;
      height: 127px;
  }
  
  .icons {
      position: absolute;
      width: 956px;
      height: 64px;
      left: 0px;
      top: 210px;
      text-align:center;
  }
  
  .icon {
      width: 149px;
      height: 47px;
      display: inline;
      position: relative;
  }
  
  hr {
      color: #AF0837;
      background-color: #AF0837;
      height: 7px;
      width: 939px;
      margin: 0 auto;
      border: 0px;
  }
  
  div.hr {
      position : absolute;
      top: 275px;
      left: 0px;
      width: 956px;
      height: 6px;
  }
  
  /* end header css */
  
  /* begin content css */
  .content {
      position: relative;
      margin-top: 6px;
      width: 956px;
      display: block;
      float: left;
      margin-left: 43px;
      clear:both;
  }
  
  .videoBox {
      position: relative;
      float:left;
      width: 615px;
      height: 328px;
  }
  
  .title {
      position: relative;
      float:right;
      top: 0px;
      width: 341px;
      height: 30px;
      font-size: 16px;
      font-weight: bold;
  }
  
  .description {
      position: relative;
      float:right;
      top: 30px;
      width: 341px;
      height: 206px;
  }
  
  .keyFeatures {
      position: relative;
      float:right;
      width: 341px;
      height: 102px;
  }
  
  /* end content css */
  
  /* begin footer css */
  
  .footer {
      position: relative;
      width: 956px;
      height: 170px;
      left: 33px;
      top: 20px;
      display:block;
      clear:both;
  }   
  
  .copyright {
      background-color: #AF0837;
      width: 100%;
      height: 45px;
  }
  
  .copyright p{
      width: 100%;
      height: 45px;
      text-align: right;
      margin-top: 10px;
      color: #fff;
  }
  /* end footer css*/
  </code></pre>