layout - 右から、他の div の上に画像をフローティング

Question

フローティング div に関する他の多くの投稿を読みましたが、テストしたことでまだ成功を見つけることができなかったので、ここにいます... (私はまだこれに慣れていないので、私のコードがとてもきれいではありません！）

他のいくつかの上に浮かびたいイメージがあります。私の目標 (達成可能な場合) は、.container の右上隅から固定位置に配置することです。私は近づいています...しかし、画像を右から移動させることができません。現在座っていると、他の写真がヘッダーから突き出ています(.crossが追加されていない場合、緑色に座っています) 、右揃え)。

このプロジェクトでは、IE7 でも適切に表示される (または適切に劣化する) 必要があります。

ここにフィドルを設定しました：（「jsfiddle.netへのリンクにはコードを添付する必要があります」という赤いエラーが何を意味するのかわかりません） 。 .net/cathi/VAkk5/5/

HTML (抜粋):

<div class="container">

<div class="crosses"><img src="/img/common/crosses-motif.png" width="213" height="118" alt="crosses-motif" /></div>

<div class="header"></div>
 <div class="hero">
    <div class="herophoto">photo</div>
  </div>
</div>

CSS (抜粋):

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

.crosses {
    float:right;
    margin-right:0;
        margin-top:130px;
}

.header {
    height: 150px;
}

.headerlogo {
    width: 250px;
    padding-top: 80px;
    padding-left: 20px;
    float:left;

}

.headerlogo2 {
    float:right;
}

.hero {
    height: 205px;
}

.heroheadline {
    height: 0;
    width: 450px;
    padding-top: 45px;
    padding-left: 70px;
    float:left;
}

.herophoto {
    height: 205px;
    width: 333px;
    float: right;
}