Two ui-widget next to each other overlapping

Two ui-widget next to each other overlapping


I want two divs next to each other. I gave these 2 divs a class of
"ui-widget" and the background of the "ui-widget-header" and "ui-
widget-content" sections of the right div stretch all the way across
the page overlapping the left div underneath. How can I have to "ui-
widget" next to each other with each one taking up half the screen?
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
        <title>Test</title>
        <link type="text/css" href="css/ui-lightness/jquery-
ui-1.7.2.custom.css" rel="stylesheet" />
        <style>
            table {
                border: 1px solid;
                border-collapse: collapse;
            }
            tr {border: 1px solid;}
            th {border: 1px solid; padding: .2em}
            td {border: 1px solid; padding: .2em}
            #inventoryArea{margin: .5em; padding: .2em;}
            #shipmentArea{margin: .5em; padding: .2em;}
        </style>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></
script>
        <script type="text/javascript" src="js/jquery-
ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){});
        </script>
    </head>
    <body>
        <div>
            <div id="inventoryArea" style="float: left;" class="ui-widget">
                <div class="ui-widget-header">Inventory</div>
                <div class="ui-widget-content" style="padding: .3em;">
                    <input type="text" id="searchBox" />
                    <button id="searchButton">Search</button>
                    <table id='searchResults'>
                        <thead>
                            <tr><th>Name</th><th>Qty</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="shipmentArea" class="ui-widget">
                <div class="ui-widget-header">Shipment</div>
                <div class="ui-widget-content" style="padding: .3em;">
                    <table id='shipment'>
                        <thead>
                            <tr><th>Name</th><th>Qty</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>