two divs, two tables

I want them to be side by side on my page.

by bob m

HTML

<div id="pfcontainer">    

 <div class="PortfolioList">
        <table id="pftable">
            <caption>Portfolio Definitions</caption>
            <thead>
                <tr style="background-color: rgb(199, 209, 214);">
                    <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
                </tr>
            </thead>
            <tbody>
            <tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/19/2012</td><td>1D 99</td><td align="right">19,010.56</td></tr><tr style="background-color: rgb(199, 209, 214);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/20/2012</td><td>1D Mean</td><td align="right">73.84</td></tr><tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/21/2012</td><td>1D SD</td><td align="right">6,771.48</td></tr><tr style="background-color: rgb(199, 209, 214);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/22/2012</td><td>1D ETL 99</td><td align="right">22,020.76</td></tr><tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/23/2012</td><td>5D 99</td><td align="right">36,815.73</td></tr><tr style="background-color: rgb(199, 209, 214);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/24/2012</td><td>5D Mean</td><td align="right">436.03</td></tr><tr style="background-color: rgb(166, 219, 237);"><td class="td_pfid">1726</td><td width="120">ABC CA Cash</td><td>Historical VaR</td><td class="td_nodedate">01/25/2012</td><td>5D SD</td><td...

CSS

<style type="text/css">
    div.PortfolioList {background-color:silver; height:500px; width:680px; position: static;  overflow-y:auto; float:left; 
                       border-radius:10px 10px 10px 10px;                       
    }
    div.TradeContrib{background-color:silver;height:500px; width:530px; position: static;  overflow-y:auto;  float:right; 
                     border-radius:10px 10px 10px 10px;             
    }
</style>

<style type="text/css">
    table {
            width: 660px;
            border-collapse: collapse;                        
        }
        caption
        {
            background-color: #7ac0da ; /*blue-green*/
            font-weight:bold;
            color: #808080;
        }
        td, th {
            padding: 5px 10px;
        }
        thead tr
        {
          /*position:fixed;  */    /* causes table headers are misaligned ! */
        }
        thead th {
            background-color: #7ac0da ; /*blue-green*/
            color: #fff; /* text color*/     
        }        
        tbody tr {
            border-top: 1px dotted #D8D5D5;
        }
        
        tbody td {
            border: 1px dotted #D8D5D5;
            border-width: 0px 1px;            
            text-overflow:ellipsis;
        }        
        tbody tr:first-child {
            border-top: none;
        }
        tr:nth-child(odd)
        {
            background-color: #a6dbed; /*aqua*/
        }
            tr:nth-child(even)
        {
           background-color: #c7d1d6;  /*grey*/
        }    
        tr:hover
        {
            background-color: #c7d1d6;  
        }

   table.contribtable {  /* Trade Contribution table */
            width: 500px;
            border-collapse: collapse;                        
        }
</style>