人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
を加えると、何故か中身のブロックが枠の下に出てしまいます。
中に入れるにはどう直せば良いのか、教えて下さい。

●質問者: wintarsnow
●カテゴリ:ウェブ制作
✍キーワード:#000000 border CSS HTML margin
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● GEN111
●23ポイント

<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>


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

◎質問者からの返答

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

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

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

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


2 ● GEN111
●23ポイント

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

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

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


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

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

に修正。


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

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

にする手もあります。

◎質問者からの返答

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

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

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


3 ● amanoftaste
●24ポイント

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

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

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

#kakomiの高さは、

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

◎質問者からの返答

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

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

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

--

すっきりしました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ