can't get 2 columns div side by side

[Chadi]

Trying to set 2 columns using css/div. I want the mp3 player on left column at 375px and chat room on right column at 100% width (fluid), both at 600px height.

I'm using this code:

<style>
#containerchat {
width: 100%;
margin-left: auto ;
margin-right: auto ;
height: 600px;
}
#contentchat {
margin-left: 20px;
float: right;
width: 100%;
height: 600px;
}
#navbarchat {
float: left;
width: 375px;
}
#footerchat {
clear: both ;
}
</style>

<div id="containerchat">
<div id="navbarchat">
<iframe src="http://files.podsnack.com/iframe/embed.html?hash=azu8rl5n&wmode=transparent&t=13347 50620" width="375" height="600" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
</div>
<div id="contentchat">
<!-- FOR 123FLASHCHAT CODE BEGIN -->
<script language="javascript" src="http://xxx:35555/123flashchat.js"></script>
<script language="javascript">
openSWF("http://xxx:35555/123flashchat.swf?init_host=xxx&init_host_s=xxx&ini t_host_h=xxx&init_room=1", "100%", "600" );
</script>
<!-- FOR 123FLASHCHAT CODE END -->
</div>
<div id="footerchat">Bottom Footer</div>
</div>

This is how it appears