Content pushing my sidebar down.... please advise

Here is the page:

http://billboardfamily.com/?page_id=2

I had this page looking the way I wanted it, including the map graphic in the content area. it looked fine. I then added the css table below the map graphic, and my sidebar (the 2 black boxes) moved down. Not sure what to do to fix this. Please advise. Thanks.

CSS for the table

.table
{
background:#333;

}
.table ul
{
float: left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li
{
list-style:none;
padding:5px 10px;
}
.table ul li.title
{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even
{
background:#fff
}
.table ul li.odd
{
background:#FFFFE6
}

about_us (the page) code

<?php
/*
Template Name: About Us
*/
?>


<?php include("header.php"); ?>

<img alt="Map" src="<?php bloginfo('template_url'); ?>/assets/images/map.png"/></a>

<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>


<?php include ('sidebar_aboutus.php'); ?>
<?php get_footer(); ?>


Can you just move #sidebaraboutus before div.content?

If you plan on always having a sidebar with that sort of width, you could also float the div.content and give it a width.

Yes, I could. That seemed to work. thanks.