Text wrap w/ PHP include

This is my first post but everyone here has seemed so helpful – and I’m stuck!

I’ve installed a PHP shoutbox comment system, which can be viewed @ http://www.wmchsib.org. It’s on the right side, in the orange sidebar. I used the following PHP include to stick it on the main page:
<?php include("http://wmchsib.org/shoutbox/shout.php") ?>

The above code is located inside the <div id=”navigation”></div> tags. When there are no comments it looks perfect. However, when the comment exceeds the width of the ‘navigation’ sidebar, the text either 1) overflows into blank space in Firefox or 2) the form elements + text overflow into blank space in IE7.

Below is my CSS code. You’ll notice on the page there is also a vert style dropdown menu – I’ve already attempted to remove that code entirely and it has no effect. I didn’t post it simply to save space.

Any suggestions?

Thanks guys!

<style type="text/css">
html,body{margin:0;padding:0}
body
{
font: 76% arial,sans-serif;text-align:center
float: left;
}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:right;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
</style>