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

I really need your help,

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?

Here is the 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 is a snapshot of the problem: