title: div height auto adjust to loaded page content within
body: <p>my problem is I have a website I'm working on it has a main wrapper div for all the content then I have a div for the banner, right menu, middle, left menu, and the footer. the middle div named middle then has a div called content inside if it I'm using javascript to load pages into that div kinda like a iframe. when I load a page into that div I need the height to auto adjust to the content that was loaded into it. I spent hours and hours looking and trying ways to fix my problem but I haven't found a answer that works yet. so any help would be greatful</p>
  
  <p>the main page coding </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Website Name&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"/&gt;
      &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function load_page(page){
      document.getElementById("content").innerHTML='&lt;object type="text/html" data="' + page + '" style="width:600px;" &gt;&lt;/object&gt;';
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;&lt;/header&gt;
          &lt;div class="leftside"&gt;
              &lt;div class="box"&gt;
                  &lt;h1&gt;Menu&lt;/h1&gt;
                  &lt;ul&gt;
                      &lt;li onclick="return load_page('php/home.php')"&gt;Home&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="middle" id="middle"&gt;
              &lt;div id="content" class="content" &gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="rightside"&gt;
          &lt;/div&gt;
          &lt;footer&gt;&lt;/footer&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>css coding</p>
  
  <pre><code>*{
  margin:0px;
  padding:0px;
  list-style-type:none;
  }
  body {
   background-image: url("../img/bg/dark-forest.bmp");
   background-attachment: fixed;
   background-size:cover;
   font-family: "Verdana", Verdana, serif;
   color:#c3bdbd;
  } 
  
  .container{
  width:1000px;
  margin:10px auto; 
  }
  
  header{
  Width:1000px;
  height:200px;
  background-color:purple;
  display:block;
  float:left;
  }
  
  .leftside{
  width:200px;
  min-height:1px;
  display:block;
  float:left;
  margin-top:10px;
  }
  
  .middle{
  width:600px;
  height:auto;
  display:block;
  float:left;
  margin-top:10px;
  background-color:blue;
  }
  
  .content{
  width:600px;
  background-color:pink;
  }
  
  .rightside{
  width:200px;
  min-height:1px;
  display:block;
  float:right;
  margin-top:10px;
  }
  
  footer{
  width:1000px;
  height:50px;
  background-color:purple;
  display:block;
  float:left;
  }
  </code></pre>