HTML･CSSに関して質問です｡添付したﾃﾞｻﾞｲﾝをHTMLとCSSで作りたいです｡画像は｢左にあるﾁﾗｼ画像｣と｢出演者の右隣の顔画像｣｢出演者の下の画像と吹きだし画像｣…

HTML･CSSに関して質問です｡

添付したﾃﾞｻﾞｲﾝをHTMLとCSSで作りたいです｡

画像は｢左にあるﾁﾗｼ画像｣と｢出演者の右隣の顔画像｣｢出演者の下の画像と吹きだし画像｣の3種類だけ使用します｡それ以外､画像は使用しません｡

背景の｢紫色｣｢ｸﾘｰﾑ色｣はCSSで色づけを行います｡

この条件で添付画像のようなﾃﾞｻﾞｲﾝを作りたいのですが､つまづきました｡
つまづいた箇所は｢ﾁﾗｼ画像｣の部分です｡
どうしても｢背景色が紫色とｸﾘｰﾑ色の狭間にﾁﾗｼ画像を置く｣ということができませんでした｡

環境としては､PCで幅広く見せたいので｢HTML5･CSS3は使用しない｣､｢IE6,7には対応しなくてもいい｣となっています｡

ご存知の方いらっしゃいましたら､ご教示お願いします｡

HTMLは次のような構造になります｡

<div class="event-news"><h4>第82回 ﾗｲﾌﾟﾂｨﾋ･ｹﾞｳﾞｧﾝﾄﾊｳｽ管弦楽団 定期演奏会</h4>
<div class="event-summary"><img src="images/poster-20120317.jpg" alt="XXX" class="event-poster">
<div class="outline">◆ 開催情報 開演日：2012年03月17日(土) 開場時間：17:30 開演時間：18:00<br />
◆ 公演場所 大阪府 ｻﾞ･ｼﾝﾌｫﾆｰﾎｰﾙ<br />
◆ 出演者 <br />
出演者ｺﾒﾝﾄ文章ｺﾒﾝﾄ文章ｺﾒﾝﾄ文章</div></div>
</div>

･ｽﾀｲﾙｼｰﾄ

.event-news {
clear:both;
position:relative;
background-color:#ffc;
border:3px solid purple;
width:72%;
}
.event-news h4 { background-color:purple; color:#fff; font-size:90%; padding:10px; text-align:center; }
img.event-poster { position: relative; top: -22px; left:15px; }
.outline { float:right; font-weight:bold; font-size:78%; margin: 10px 45px 10px 5px; line-height:1.5em; }

※問題があるのはﾁﾗｼ画像の位置表示という事ですので､出演者画像･ｺﾒﾝﾄ表示等は除いています｡

基準となるﾎﾞｯｸｽ(.event-news)に｢position:relative;｣を指定し､ﾁﾗｼ画像にも｢position: relative;｣を指定して､topおよびleftで配置します｡
開催情報等は別のﾎﾞｯｸｽにまとめて入れて､｢float:right;｣および｢margin｣で位置調整して表示します｡

http://www.mdn.co.jp/di/articles/517/?page=13