Layout overlapping

I am working a peace of design i wanna do, but i am having issues. instead of the .content showing below two tabs that i created, its starting from where the tabs are starting, what am i doing wrong.

<div class="tab">
        <li><a href="#">Events</a></li>
        <li><a href="#">Past Events</a></li>
<div class="content">
.tab ul li{display:block;padding:10px;border:1px solid #003; float:left;border-bottom:none!important; margin-left:10px;}
div.content{width:500px;border:1px solid #003;height:200px;}

You need to contain the tabs, so add overflow:hidden to your and you should be fine.