Yuichirouの文書の倉庫

記事一覧ページ

2004年10月10日

floatによる左右サイドバー奮闘記 19:00

本家:d:id:Yuichirou:20041010#1097402449

l-sidebarとr-sidebarのdivをフッタに回しながらうまく表示されるようにした方法と、Operaで幅がおかしくなる問題の解消法。

何をどうしたか

(ソース部分はすべて簡略化しています。悪しからず)

前回の時点で、「ページのヘッダ」に

<div class="l-sidebar">
(左サイドバー部分)
</div>
<div class="r-sidebar">
(右サイドバー部分)
</div>
<div class="main">

「ページのフッタ」に

</div>

というブロック構成で、「スタイルシート」に

div.l-sidebar {
 position: static; float: left; width: 15%;
}
div.r-sidebar {
 position: static; float: right; width: 15%;
}
div.main {
 position: static; width: 100%;
}

と書くことで(IEのみながら)一応成功していました。


ここから、「floatを設定したブロックは、floatを設定していないブロックに回り込まれる」というルールに気づいた私は、新たにdiv.leftブロックを新設し、

「ページのヘッダ」

<div class="left"><!-- div.leftの開始タグ -->
<div class="main">

「ページのフッタ」

</div>
<div class="l-sidebar">
(左サイドバー部分)
</div>
</div><!-- div.leftの終了タグ -->
<div class="r-sidebar">
(右サイドバー部分)
</div>

「スタイルシート」

div.left {
 position: static; float: right; width: 85%;
}
div.main {
 position: static; float: left; width: 72.25%;
 /* 85:100=x:85 → x=72.25 */
}
div.l-sidebar {
 position: static; width: 100%;
}
div.r-sidebar {
 position: static; width: 100%;
}

と書き換えました。

これにより、

  • div.hatena-bodyの中では、div.leftが左に寄って、div.r-sidebarは右に回り込み
  • div.leftの中では、div.mainが右に寄って、l-sidebarは左に回り込み

となり、l-sidebarとr-sidebarのdivをフッタに回しながら、予定通りに表示されるようにできました。

Operaの対処法

Operaでの表示の仕方を見て、突然気づきました。

IEでは回り込んだブロックのwidthの基準が『親ブロックの幅-floatを設定したブロックの幅』なのに、Operaでは回り込んだブロックのwidthの基準が『親ブロックの幅そのもの』だ!

そこで、hatena.cssでも使っている方法を利用し、スタイルシートのサイドバーに関する部分を、

div.l-sidebar {
 position: static; width:12.75% _width: 100%;
 /* 85% - 72.25% = 12.75% */
}
div.r-sidebar {
 position: static; width: 15% _width: 100%;
 /* 100% - 85% = 15% */
}

と書き換えることで、Operaでの正常表示を実現しました。

トラックバック - http://yuichirou.g.hatena.ne.jp/Yuichirou/20041010