title: Resizing divs depending on information inside
body: <p>I have a container where I want to hold information (which would be updated regularly). But sometimes, I might want this information to be long or short, and for this I cant have a fixed height on my container, so depending on the amount of text/information it should resize. Here's my script.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;LoL Champs&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/css.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- NAVIGATION --&gt; 
  &lt;div id="nav-bar"&gt;
      &lt;div id="nav-bar-title"&gt;LoL Champs&lt;/div&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Champs&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Info&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Guides&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Model Viewer&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Lists&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- END NAVIGATION --&gt;
  
  &lt;div id="main-body"&gt;
  &lt;div id="nav-body-divider"&gt;&lt;/div&gt;
  
  &lt;p id="home-body-title"&gt;News&lt;/p&gt;
  &lt;!-- News Container --&gt;
  &lt;div id="news-container"&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>/** MAIN PAGE CONFIG CSS **/
  
  html, body {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      max-width: 1920px;
      max-height: 1050px;
      font-size: 100%;
  }
  
  html { 
    background: url(../images/JinxBG.jpg) 0 0 fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  p {
      color: white;
  }
  
  a:link {color: inherit;}
  a:visited {color: inherit;}
  a:active {color: inherit;}
  a {text-decoration: none;}
  /** MAIN CSS **/
  
  /**NAVIGATION**/
  #nav-bar {
      width: 100%;
      height: 10%;
      background-color: #A62D2D;
      position: fixed;
      box-shadow: 0px 2px 9px black;
      font-size: 100%;
      max-height: 10%;
      max-width: 100%;
  }
  
  #nav-bar-title {
      font-family: 'Sansita One';
      color: #262424;
      position: absolute;
      width: 20%;
      height: 100%;
      left: 0.3%;
      font-size: 1.8em;
      max-width: 16%;
      margin-top: 1.2%;
  }
  
  #nav-bar ul {
      list-style-type: none;
      color: #2E2C2C;
      font-family: 'Belleza';
      font-size: 1.5em;
      position: absolute;
      top: 0;
      max-width: 100%;
      max-height: 100%;
      left: 15%;
      line-height: 0%;
      margin-top: 0;
      margin-bottom: 10%;
      top: 50%;
  }
  #nav-bar li {
      margin-right: 45px;
      display: inline;
      height: 100%;
      -webkit-transition: color 0.5s ease;
  }
  #nav-bar li:hover {
      color: #C7C7C7;
      -webkit-transition: color 0.5s ease;
  }
  
  /** END NAVIGATION **/
  
  /** MAIN TEXT BODY **/
  #nav-body-divider {
      width: 100%;
      height: 1px;
      background: #B55050;
  
  }
  
  #main-body {
      max-width: 100%;
      max-height: 90%;
      background: #A62D2D;
      width: 70%;
      height: 100%;
      margin: auto;
      position: relative;
      top: 10%;
  }
  
  /** MAIN BODY NEWS **/
  
  #home-body-title {
      font-size: 2.4em;
      font-family: Belleza;
      color: #C98A5D;
      position: relative;
      left: 3%;
      top: 0%;
  }
  
  #news-container {
      width: 45%;
      height: 40%;
      background: #CF4040;
      -webkit-border-radius: 7px;
      -moz-border-radius: 7px;
      border-radius: 7px;
      position: relative;
      left: 3%;
  }
  </code></pre>
  
  <p>I want to resize <code>news-container</code> so that it adapts to the amount of stuff in it, but resize it only on height. The width should stay the same. Also, if the div will be bigger, how can I move the objects that will be below that div to accommodate further down on the page and make space for the big container?</p>
  
  <p>Cheers, Nick</p>