孤雲野鶴

アレンジしてある場合は違いますが、ブログ本文の終わりには、コメントやトラックバック等、幾つかのリンクが張ってあり、次に区切りのライン、日付、タイトルと続きます。そのため記事の区切りが判りにくいと感じていました。
そこでバックグラウンドカラーをライン代わりに、その上に日付とタイトルを表示させればシンプルになるのではないかと考えたのですが、実現させるにはかなり苦労をしました。タイトルと日付がきちんと１行に並ばないのです。とりわけ、IEとMozilla（Firefox）では位置がずれ、うまく表示させるために大変苦労をしました。現在ネットスケープはインストールしていませんが、Mozillaと近い（？）と思います。マックは全くわかりません。

CSSと、トップページのHTMLを載せます。参考にして下さい、というよりも笑ってやって下さいという感じです。

タイトルは、「float:left;」で左に流し。日付は右詰めで表示させています。位置を合わせるコツは「margin:0 auto;」でした。このコマンドは日付（.date）、タイトル（.tt h2）の両方に入れないとダメでした。バックはリピート画像でもいいのですがべた張りです。難しい質問にはおそらく答えられません。以下、CSSです。

.tt{
margin:0 0 12px;
background-image: url(http://image.blog.livedoor.jp/****/imgs/****.gif);
}
.tt h2{
float:left;
margin:0 auto;
color:#3f5f3f;
font-size:14px;
font-weight:bold;
text-align:left;
padding-left:20px;
}
.date{
margin:0 auto;
color:#003;
font-size:10px;
font-weight:normal;
text-align:right;
padding-right:20px;
}

トップページのHTML部分です。
<div class="tt">
<h2><$ArticleTitle ESCAPE$></h2>
<IfDateChanged><p class="date"><$ArticleDate$></p>
</IfDateChanged>
</div>