css で 「Top へ戻る」 の書き方

質問

h2 で右側に 「Top へ戻る」 を置きたいんですが、
以下のように書いてみると IE6 で背景画像が表示されないのと
かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか．．．

<style type="text/css">
.h2_container{
background: url(images/bg_h2.jpg);
}
.title{
width: 500px;
float: left;
}
.top{
width: 100px;
float: left;
}
.clear{
clear: both;
}
</style>

<div id="h2_container">
<div class="title"><h2>内容のタイトル</h2></div>
<div class="top"><a href="#">Top へ戻る</a></div>
<div class="clear"></div>
</div>

回答No.2

deco_o3u · ベストアンサー

こんなんどーでしょ。

<style type="text/css">
#h2_container{
overflow: hidden;
display: block !important;
display: inline-block;
background: url(bg.jpg);
}
h2{
float: left;
margin: 0;
width: 500px;
}
.top{
margin-left: 500px;
width: 100px;
}
</style>

<div id="h2_container">
<h2>内容のタイトル</h2>
<p class="top"><a href="#">Top へ戻る</a></p>
</div>

回答No.1

grumpy_the_dwarf

基本はこれだけ。

<style type="text/css">
.h2_container{background: url(images/bg_h2.jpg);}
.title {float:left;}
</style>

<div id="h2_container">
<h2 class="title">内容のタイトル</h2>
<p class="top"><a href="#top">Topへ戻る</a></p>
</div>

何もかもfloatする必要はないし、何もかもdivで囲む必要もない。

お礼

返信ありがとうございます。 こちらの方がずっとすっきりしてますね

お伺いしたいのですが、以下のコードで試したところ h2 の上に
20ピクセルほど隙間が出来てしまうのですが、
消す方法ご存知でしょうか。　IE6 では隙間は無かったです。

<style type="text/css">
.h2_container{
background: url(images/bg_h2.jpg);
border: 1px solid red;
}
.title {
float: left;
border: 1px solid blue;
}
</style>

<div class="h2_container">
<h2 class="title">内容のタイトル</h2>
<p class="top"><a href="#top">Topへ戻る</a></p>
</div>