欄の両端に文字をおきたい

質問

よろしくおねがいします。

ブログ歴２ヶ月です。
スタイルシートを自分なりにいじっているのですが、毎日更新するブログの
「タイトル」のところについての質問です。

欄の左はじに今日のタイトル、右はじに今日の日付、としたいのですが、
うまくできません。

そこのところのHTMLはこうなっています。

<h2><a id="<%topentry_no>" name="<%topentry_no>"></a><a href="<%topentry_link>"><%topentry_title></a><a href="<%topentry_link>"><%topentry_year>/<%topentry_month>/<%topentry_day>（<%topentry_wayoubi>）</a></h2>

そこで、<div align="right"> </div>を、後半に入れてみたところ（↓のように）、

<h2><a id="<%topentry_no>" name="<%topentry_no>"></a><a href="<%topentry_link>"><%topentry_title></a><div align="right"><a href="<%topentry_link>"><%topentry_year>/<%topentry_month>/<%topentry_day>（<%topentry_wayoubi>）</a></div></h2>

日付部分は確かに左はしによったのですが、一段（一行）下がってしまいました。
なぜなのでしょう？

同じ行に入れたいのですが……。原因がわかりません。

どなたか、わかる方教えていただけないでしょうか。
よろしくお願いします。

回答No.1

thila

1行下がる原因は、divがインライン要素ではなくブロック要素だからです。

ブロック要素の例
aaa<div>bbb</div>ccc
↓表示
aaa
bbb
ccc

インライン要素の例
aaa<span>bbb</span>ccc
↓表示
aaabbbccc
※インライン要素ではalignやtext-alignは使えません。

以上のことを踏まえて思いついた対処法
・floatを使って回り込ませる
・テーブルにしてしまう

テーブルをレイアウトに使うのはよろしくないと言われていますので、floatを使う方が無難でしょうか。
＃他に良い方法があればどなたかご指摘お願いします；

同じ行にするだけなら日付を入れているdivにdisplay:inlineを指定するだけで対処可能ですが、これだけを指定するとalign等が使えなくなります。
display:inlineを使いつつ右揃え等の横位置を指定するには、日付を入れているdivに対して幅指定が必要だった気がするので、ブログのテンプレートが記事欄の幅がブラウザ幅に合わせて変わるタイプの場合は、やめておいた方が良いと思います。

お礼

ご回答ありがとうございます。
floatについて、調べてやってみましたが、できませんでした。
（私の知識不足の可能性大）
希望どおりとは行きませんでしたがなんとか別の形に落ち着きそうなので
それでいこうと思います。
いろいろ考えてくださりありがとうございました。