html - 上マージンに関して、右のコンテナを左のコンテナに揃えるにはどうすればよいですか?

Question

次のコードがあります。

html:

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
</div>

CSS:

.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
}
.left {
    width: 600px;
    margin-right: 20px;
}
.right {
    width: 320px;
    height: 300px; 
    background-color: #999;
    float: right;
}
.panel {
    background-color: red;
}

div は、margin top に関して div と.right一致しません。.leftdiv は divの.right少し下に表示され.leftます。マージンの上部に関してのみdiv.rightがdivと整列するようにするにはどうすればよいですか?.left