Layout overlapping

HTML & CSS
1

Hi,
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">
    <ul>
        <li><a href="#">Events</a></li>
        <li><a href="#">Past Events</a></li>
    </ul>
</div>
<div class="content">
</div>

#wrapper{width:300px;}
div.tab{width:300px;}
.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;}
2

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