I'm developing a simple css theme and i'm using left-center-right layout, I am using float for positioning the right and left elements, and margin for the center. But if I take a look at the website, all the website parts are getting inside each other.

Here is what I've got right now:

HTML

<div class="container">
    <div class="right">
        <div class="block">
            <div class="title">My Block Of Data Here Is Title</div>
            This is my block of data! Here i can show website stats and announcements.
        </div>
    </div>
    <div class="left">
        <div class="block">
            <div class="title">My Block Of Data Here Is Title</div>
            This is my block of data! Here i can show website stats and announcements.
        </div>
    </div>
    <div class="center">                
        <div class="block">
            <div class="title">Welcome to SITE_TITLE_HERE!</div>
            This is where we post so many stuff!<br><br><br><br><br><br><br><br><br><br>Thanks, SITE_TITLE_HERE stuff.
        </div>
    </div>
</div>

CSS

body{
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 18px;
}

.container{
    margin: 0 auto;
    width: 65%;
}   

.left{
    float: left;
    width: 20%;
}   

.right{
    float: right;
    width: 20%;
}

.center{
    margin: 0 auto;
    width: 60%;
}

.block{
    width: 100%;
    padding: 3px;
    background: #fafafa;
    outline: 1px solid #f2f2f2;
    outline-offset: 2px;
    text-align: center;
}

.block .title{
    font-size: 24px;
    border-bottom: 1px solid #000;
    background: #76E0EE;
}

Fiddle: http://jsfiddle.net/XK6dN/2/

Update: I'm almost sure it's the outline of the block class, but even if it's that. how can I keep them from overriding each other ?