title: Why does my text div spill out past my container div?
body: <p>I really need your help,</p>
  
  <p>I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?</p>
  
  <p>Here is the CSS markup:</p>
  
  <pre><code>    height: 100px;
      width: 500px;
      bottom: 50%;
      right: 50%;
      position: absolute;
      display: none;
  }
  
  #container {
      background: #FFF;
      left: 50%;
      padding: 10px;
      top: 50%;
      margin: 0;
      padding: 0;
      height: 100%;
      border: 2px solid rgb(100,139,170);
      height: 100%;
      position: relative;
  }
  .topbar {
      cursor: pointer;
      color: white;
      background: rgb(100,139,170);
      padding: 4px;
      font-weight: bold;
  }
  #text {
  
      height: 100%;
      border: 1px solid red;
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;div id="container"&gt;
  
          &lt;div style="float:left;" class="topbar"&gt;Custom Dialog Box&lt;/div&gt;&lt;div class="topbar" style="text-align: right;"&gt;Close&lt;/div&gt;
  
          &lt;div id="text"&gt;&lt;p&gt;test&lt;/p&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a snapshot of the problem:</p>
  
  <p><img src="https://i.stack.imgur.com/7mSx7.png" alt="enter image description here"></p>