title: Textbox Cut Off
body: <p>I feel like this is something that's really simple to fix, but I'm just too dumb to figure it out, but I've been Googling for a long time to figure this out. The textbox on the bottom of my page is getting cut off for some reason. I think it has to do with how the body div is set up. Also, if someone could tell me how to get my textarea the same size as the main div, that'd really be nice. <a href="http://jsfiddle.net/jRCy3/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="body"&gt;
  &lt;div id="main"&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
      &lt;hr /&gt;
      &lt;p&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/p&gt;
  &lt;/div&gt;
      &lt;div id="controls"&gt;&lt;form action="#" method="POST"&gt;Enter a Comment: &lt;br /&gt;&lt;textarea sizable="false"&gt;&lt;/textarea&gt;&lt;br /&gt;&lt;input type="submit" value="submit" /&gt;&lt;/form&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#main {
      background-color:white;
      position:relative;
      min-height:300px;
      padding: 20px 20px 20px 20px;
      border-left: 1px grey solid;
      border-right: 1px grey solid;
      border-bottom: 1px grey solid;
  }
  #main p {
      font-size:20px;
      word-wrap:break-word;
  }
  #header {
      background-color: #C0C0C0;
      width: 100%;
      border-bottom: 1px solid grey;
  
  }
  html, body{
      height: 100%;
  }
  #body {
  margin-left:75px;   
  margin-right:75px;
  margin-bottom:125px;
  margin-top:0;
  }
  #controls {
      position: absolute;
      display: inline-block;
      width:90%;
      height: 100px;
      overflow: hidden;
      z-index: 0;
  } #controls form textarea {
      resize: false;
      width: 100%;
      height: 100px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 0;
  } 
  </code></pre>