I have 3 divs within a wrapper:

<div id="wrapper">

<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->

<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->

<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->

</div><!--wrapper-->

Both 'leftbar' and 'middle' are floating left, whilst 'rightbar' is floating right. 'wrapper' has height:100%; clear:both; set.

However, if there is a large amount of text or content in 'middle' it overflows the 'wrapper' div. I am struggling to figure out why this is occurring.

My CSS is:

#wrapper {
    width: 1000px;
    height: 100%;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
}

#leftbar {
    float:left;
    width: 150px;
    min-height: 450px;
    padding: 5px;
}

#middle {
    float:left;
    height: 100%;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

#rightbar {
    float:right;
    width: 200px;
    min-height: 450px;
    padding: 5px;
}

Any advice is appreciated!

EDIT: here is the issue on a test server: http://host.pixelframe.net.au/~pptestco/index.php?id=20