CSSの質問です。

中央揃えにした1つのブロックの中に、3つのブロックを3段組にしたレイアウトをしたいと思っています。
・CSS
#kakomi {
 width: 800px;
 margin: 0px auto;
}
#left {
 float: left;
 width: 600px;
}
#menu {
 float: left;
 width: 200px;
}
#main {
 width: 400px;
 float: right;
}
#right {
 float: right;
 width: 200px;
}

・HTML
<div id=”kakomi”>
 <div id=”left”>
  <div id=”main”><p>メイン</p></div>
  <div id=”menu”><p>メニュー</p></div>
 </div>
 <div id=”right”><p>サブメニュー</p></div>
</div>

以上のようにして、見た目は思うように表示されているのですが、#kakomiに枠線を付けたいので、#kakomiに
border: 1px solid #000000;
を加えると、何故か中身のブロックが枠の下に出てしまいます。
中に入れるにはどう直せば良いのか、教えて下さい。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/04/02 15:07:14
  • 終了:--

回答(3件)

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582005/04/02 15:26:02

ポイント23pt

<div id=”kakomi”>

 <div id=”left”>

  <div id=”main”><p>メイン</p></div>

  <div id=”menu”><p>メニュー</p></div>

 </div>

 <div id=”right”><p>サブメニュー</p></div>

 <hr style=”margin : 0 ; padding : 0 ; border : none ; height : 0 ; clear:both;” />

</div>


手っ取り早いのはこうかな。

id:wintarsnow

回答ありがとうございます!

出来ました! ありがとうございます。

でも質問の現象が起きるのは何故なのでしょう?

文法的にどこか間違っているというのではないのでしょうか?

2005/04/02 15:33:37
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582005/04/02 16:58:35

ポイント23pt

特に文法的な問題はないと思います。

<div id=”kakomi”>を描画する際に float 指定した子要素は無いものとして扱われるのでこうなります。

そこで clear して高さを教えてやる必要があるのです。


先のだと IE では hr が見えちゃうので

<hr style=”margin:0;padding:0;heitht:0;visibility:hidden;clear:both;” />

に修正。


あまり空要素は気持ちよくないけど、

<div style=”clear:both;”></div>

にする手もあります。

id:wintarsnow

補足ありがとうございます。

>float 指定した子要素は無いものとして扱われる

なるほど。そういうことなのですね。

2005/04/02 17:08:35
id:amanoftaste No.3

amanoftaste回答回数42ベストアンサー獲得回数02005/04/02 17:04:37

ポイント24pt

http://www.mozilla.gr.jp/standards/webtips0021.html

heightプロパティの注意点〜内容がfloat要素の場合 - Web標準普及プロジェクト

>でも質問の現象が起きるのは何故なのでしょう?

#kakomiの高さは、

そのなかのfloatしていない要素の高さになります。

id:wintarsnow

回答ありがとうございます。

>そのなかのfloatしていない要素の高さ

ふむふむ。つまり中身が全てfloatしている=高さがない、ということになるわけですね。

--

すっきりしました。

皆様ありがとうございました!

2005/04/02 17:10:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません