title: Simple CSS layout for chat app
body: <p>I want to accomplish a seemingly simple div layout for a basic chat application and tried multiple things already, but none of them worked for this layout.</p>
  
  <p>Here's the idea:
  <img src="https://i.stack.imgur.com/Q1J1N.png" alt="chat layout"></p>
  
  <p>While the red bottom text-input part, and the right userlist part are supposed to be fixed at their location and of fixed size, the center blue content part should fill the remaining space. </p>
  
  <p>The content part and the userlist part are supposed to scroll (green) their content vertically if needed, but there should be no scrollbar for the whole website.</p>
  
  <p>And important: <strong>The whole website should automatically fill the size of the browser window.</strong></p>
  
  <p>It basically boils down to having columns and rows of "fill remaining space" and "fixed size" mixed, which is easily possible in the environment I usually code in (XAML).</p>
  
  <p>Using features that aren't compatible with old browsers or even Javascript as (very) last resort would be acceptable. <strong>But I don't want to use tables</strong>.</p>
  
  <p>Edit: Here's my current Code. At the moment I only tried to solve this for content and input area. This results in the input area (correctly) always being at the bottom, but the content area still occupying the whole height "behind" the input area. (Setting overflow and height on the messageContainer instead on the outerContainer doesn't help.)</p>
  
  <pre><code>&lt;div id="outerContainer"&gt;
      &lt;div id="messageContainer"&gt;
          &lt;ul id="messageList"&gt;&lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id="inputContainer"&gt;
          &lt;input type="text" id="msg"/&gt;
          &lt;button class="btn" id="broadcast"&gt;send&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>body
  {
      padding: 0px;
      margin: 0px;
      overflow: hidden;
  }
  
  #outerContainer
  {
      text-align: center;
      margin-left: 32px;
      margin-right: 0px;
      overflow:auto;
      height: 100%;
  }
  
  #messageContainer
  {
      text-align: left;
      margin-top: 32px;
      margin-bottom: 72px;
  }
  
  #inputContainer
  {
      position:fixed;
      bottom:0px;
      margin-bottom: 32px;
      margin-left: 0px;
      margin-right: 32px;
      width: 100%;
  }
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Thanks!
  Andrej</p>