崩れない２カラムレイアウト

先ほど、このblogのレイアウトを少し変更しました。

このブログのレイアウトには、レンタル元のSeesaaさんが用意した「右メニュー２カラム型」のCSSをほぼデフォルトのままで用いていたのですが、ブラウザのウィンドウの枠を狭くすると右のメニューが下に落ち込むという欠点がありました。

そこで、次のようにCSSをカスタマイズしてみました。

まず、左側の記事部分に関わる箇所を
#content {
margin-bottom:30px;
margin-top:25px;
margin-right: 18em;
margin-left: 1em;
}
と指定しなおしました。従来は「float」が指定されていたのですが撤廃。横幅が％指定されていたのも取り除き、margin-rightにしてみたのです。

更に、右のサイドバーに関わる部分はabsoluteで指定し、
#links {
position: absolute;
top: 9em;
right: 1em;
width: 16em;
}
としてみました。これで、ウィンドウを狭くしてもサイドバーは動きません。

IE(Win, Mac)、Firefox(Win)、Opera(Win)、Safari(Mac)、OmniWeb(Mac ってこんなの使っている人居ないですよね)の各環境で、ほぼ私の意図通りに表示されることを確認済みです。とはいえ、いつも思うことですが、ブラウザによって位置が微妙に異なるのですよね。Webの世界は、CSSに関してはまだまだ発展途上だと常々思います。