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