can't get 2 column divs side by side

[LogicWeb]

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=1334750620" 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&init_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

http://s14.postimage.org/5ezfyng9t/chat.png

[JorgeM]

Try this code. Note, I just added the black background to the ContentChat div just so I could see the divs line up side by side. This code should work across modern browsers.

<style type="text/css">
#containerchat {
  width: 100%;
  margin-left: auto ;
  margin-right: auto ;
  height: 600px;
}
#navbarchat {
  width: 375px;
  float:left;
}

#contentchat {
  margin-left:  20px;
  height: 600px;
  background-color:Black;
  overflow:hidden;
}

#footerchat {
    clear: both ;
}
</style>

[LogicWeb]

That worked, thanks!

[JorgeM]

Awesome!