netoyaji

ご返事が遅くなりまして、申しわけありません。
rivatyさんの方法だけでは、ダメでした。タイトル部分のデザインが完全に崩れてしまいました。
そこで、jim912さんのアドバイスに沿って、あちこち修正してうまく行きました。ミソは、positionにあったようです。

ただ、jim912さんのアドバイスにあった、「width」を使用しなくても問題なく表示しているのですが…。ここでの「width」を使用する意味は何でしょうか？

修正したコードは以下の通りです。「/*・・・*/」部分は削除した部分です。追加・変更した部分は、< ・・・ >で括ってあります。

.post_top{
	/*position: relative;*/
	border-left:8px #5A6B1E solid;
	border-bottom: 1px #5A6B1E solid;
	< padding-bottom: 20px; >
	/*height: 40px;*/
	/*background: #f6f6f6;*/
}
.post_bottom{
	margin: 0 50px 0 50px;
	height:3px;
	background:url(images/line.jpg) repeat-x bottom;
}
.posttitle{
	/*position:absolute;*/
	/*top:0px;*/
	/*left:5px;*/
	< overflow:hidden; >
	margin-left: 5px;
	font-size:18px;
	font-family:arial;
	color:#5A6B1E;
	border:0px red solid;
}
.posttitle a{
	font-family:arial;
	color:#5A6B1E;
	text-decoration:none;
}
.posttitle a:hover{
	font-family:arial;
	text-decoration:underline;
	color:#5A6B1E;
}
.date {
	/*position:absolute;*/
	font-family:arial;
	/*top:24px;*/
	/*right: 20px;*/
	< float:right; >
	font-size: 10px;
	< padding: 3px 20px 0px 0px; >
}
.author{
	/*position:absolute;*/
	float:left;
	< font-family:arial; >
	font-size:10px;
	< padding:3px 0px 0px 5px; >
	/*top:24px;*/
	/*left:5px;*/
}