infamous Two Div's next to each other

Question

I know there are a lot of questions about this, and I've tried many solutions but I can't get it to work. I have two divs in a facebook canvas page(810px), and I want them to display next to each other. Currently one is on top of the other. Here is my code:

<div class="tab_content tab1" >
 <div id="dialerdiv1" style="float: left; margin-right: 405px;">
    <embed type="application/x-shockwave-flash" wmode="opaque"
    src="thesource"
    width="301"
    height="401"
    id="popUpSwf"
    name="popUpSwf"
    quality="high"
    border="none"
    allowscriptaccess="always"
    pluginspage="http://www.adobe.com/go/getflashplayer"
    scale="noscale"
    menu="false"
    flashvars="..." />
 </div>
 <div id="dialerdiv2" style="float: right; width: 405px;">
      <embed type="application/x-shockwave-flash" wmode="opaque"
      src="thesource"
      width="301"
      height="401"
      id="popUpSwf"
      name="popUpSwf"
      quality="high"
      border="none"
      allowscriptaccess="always"
          pluginspage="http://www.adobe.com/go/getflashplayer"
      scale="noscale"
      menu="false"
      flashvars="..." />            
 </div>
</div>  

How do I get those two inside divs next to each other? Also, I tried using a table, and it works, but Firefox shifts those td cells to the outside of the canvas area and I cannot get them centered (only firefox)

Thanks

Answer 1

If the parent div <div class="tab_content tab1"> has more than 810px available in width then the following code should work perfectly fine.

<div class="tab_content tab1">
    <div id="dialerdiv1" style="float: left; width: 405px;">
        <embed ... />
    </div>
    <div id="dialerdiv2" style="float: left; width: 405px;">
        <embed ... />            
    </div>
    <div style="clear: both;"></div>
</div> 

Answer 2

if you change the width of second div it should work.

<div id="dialerdiv2" style="float: right; width: 370px;">

also it should work like this

         <div id="dialerdiv1" style="float: left; margin-right: 390px;">
            ......
         </div>
         <div id="dialerdiv2" style="float: right; width: 390px;">
            ........
         </div>

The problem comes from the size of your divs and the available space. Play a little bit with them and you will figure out what is the correct values to use