html - Why does my text div spill out past my container div? -

i need help,

i can't seem figure out why div #text spills out past container div? should fit nicely inside container?

here css markup:

    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;  } 

html:

<div id="wrapper">      <div id="container">          <div style="float:left;" class="topbar">custom dialog box</div><div class="topbar" style="text-align: right;">close</div>          <div id="text"><p>test</p></div>      </div>  </div> 

here snapshot of problem:

because #test {height:100%;} it's parent's height, way #wrapper set height:100px, #test same height, plus borders, , #container doesn't have enough space hold (due blue bar), overflows.

i noticed layout can done simpler follows.

#wrapper {      height: 100px;      width: 500px;      bottom: 50%;      right: 50%;      margin-bottom: -50px; /*half height*/      margin-right: -250px; /*half width*/      position: absolute;      /* display: none; */  }  #container {      background: #fff;      border: 2px solid rgb(100, 139, 170);  }  .topbar {      cursor: pointer;      color: white;      background: rgb(100, 139, 170);      padding: 4px;      font-weight: bold;  }  #text {      border: 1px solid red;  }

<div id="wrapper">      <div id="container">          <div style="float:left;" class="topbar">custom dialog box</div>          <div class="topbar" style="text-align: right;">close</div>          <div id="text">              <p>test</p>          </div>      </div>  </div>