サイトデザイン変更(2)

2004年4月25日(日) by level
B ?

代替スタイルシート test で、content と sidebar が横並びにならない件、さっそく、pswf さんからメールをいただきました。内容は container の囲み方がおかしい(header から footer までの全体を囲むのではなく、header と content だけを囲むだけ)というもので、確かにオリジナルのほうもそうなっていました。昨日の記述では、content と sidebar が横に並ぶはずのないものでした。現在の構成は以下のようになっています。

<div id="container">
 <div id="header"></div>
 <div id="content"></div>
</div>
<div id="sidebar"></div>
<div id="footer"></div>

ただし、問題の本質は container ではなく、純粋に content と sidebar の関係にあるようです。分りやすく示すために、container をはずして例を作り直しました。以下のように、conotent を float:left で、sidebar を float:right で指定します。普通はこれで二つが横に並ぶはずです。

#content {
  margin-right    : 11em;
  float           : left;
}
#sidebar {
  width           : 10em;
  float           : right;
}

<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>

問題は、content の中に、float 指定された要素がある場合です。

この結果、(a)のように、float:left 指定された content の中に、float:right 指定された要素があると、sidebar が content の右に配置されないということが分りました。この float:right 指定は、ここのように、記事の右上に、アクセントの画像などを表示するときや、本文の画像などにも使用しています。また、IE や Opera でも同じように表示されるのでブラウザ側のバグでもないようです。これは困りましたね。どういうカラクミでこういう動作になるのでしょうか?そして回避策は?

掲示板に Piro さんより書き込みがありましたが、まだ詳しく見てません。

追加情報 ありがとうございます。とりあえず url のメモ。

  1. http://pc5.2ch.net/test/read.cgi/software/1082106244/269-275n
  2. Bluelight Nova「levelさんへ

なお、昨日の日記の内容は、書き方も悪かったようで自分でも混乱しています。昨日の最後から二つ目の例は今日の例と同じじゃないですか。昨日の分は忘れて今日の分だけ見てください。:-)

コメント

コメントはありません。

トラックバック

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. データがありません。