3カラムのレイアウト、及びdivの入れ子等

質問

初めまして。
とても基本的なことでお恥ずかしいのですが、
3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。
どうぞ宜しくお願い致します。

下記のように、3カラムの段組みレイアウトを行いました。

左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、
中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。
HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。

＜CSS＞
#contents {
margin-left:155px;
margin-right:155px;
}
#left {
float:left;
width:150px;
}
#right {
float:right;
width:150px;
}

＜HTML＞
<div id="left>あああああああ</div>
<div id="right">いいいいいいい</div>

<div id="contents">ううううううう</div>

ここまでは、問題なく配置させられたのですが、

【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。
ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。
と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;)

そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？

可能な限りシンプルに、
正しいCSSの使い方でレイアウトしたいと考えております…！(>_<)

divの不必要な多用？
（ひとつひとつの画像をdivの中に入れたり、
横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造）
は避けたいと思っておりましたが、
もしかして、それがいちばん正しいのでしょうか…？

ご存じの方、どうぞご指南の程宜しくお願い致します！
散文、失礼いたしました！

回答No.5

metametamu · ベストアンサー

これでどうでしょう？

* {
margin:0;
padding:0;
}

body{
text-align:center;
}

img {
border:0px;
}

/* 全体の幅 */
#detail {
width:1024px;
margin:auto;
text-align:left;
}

/* header・main・footerをまとめる */
#container {
}

#contents {
float:left;
width:664px;
}

#left {
float:left;
width:180px;
}

#right {
float:right;
width:180px;
}

#footer {
clear:both;
}

div.bnr190 {
text-align:center;
}
div.bnr190 ul {
width:590px;
margin:atuo;
text-align:left;
}

div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}

お礼

12/13

色々と調べているうちに、

div.bnr190 ul {
display:inline-block;/*これを追加し、marginに関する記述を削除*/
width:590px;
text-align:left;}

div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}

で、無事に画像（インライン要素）の下のリスト（ブロック要素）もまっすぐに並べることができました…！

何度もいろいろと教えて下さって、本当に×(2)感謝しています(;ω;)
ありがとうございました！

補足

お返事が遅くなってすみません！
今、テストをしてみたのですが…、問題の箇所も変わらず、今度は左右のナビ部分も大きくはみ出してしまいました…。

折角書いて下さったのに、ホントウにすみません…(;ω;)

回答No.4

ORUKA1951

この場合floatを使うとIEと標準ブラウザではプレゼンテーションが大きくずれてしまいます。　3columnの配置にfloatを使うのはお勧めしません。そもそもfloatは本文内で画像などの周囲に本文を回り込ませるための物で、本来の目的外に使うのは？？です。

　率直に
<div class="bodyText">
　　<h1>見出し</h1>
　　<p>本文</p>
　　<p>本文</p>
　　<ul class="imageList">
　　　<li><img src="[URL" width="" height="" alt=""></li>
　　　<li><img src="[URL" width="" height="" alt=""></li>
　　　<li><img src="[URL" width="" height="" alt=""></li>
　　</ul>
　　<hr class="ieBug"><!-- IE対策 -->
　　<div class="Annotation">
　　　<div class="index">
　　　</div>
　　　<div class="note">
　　　</div>
　　</div>
</div>
とでもマークアップします。率直に・・・

そのうえで、まずdiv.bodyTextを、position:relative+リキッドスタイルwidth:80%などで指定します。
次いで、div.bodyText > div.Annotation(子セレクタ)、あるいはdiv.bodyText div.Annotation(子孫セレクタ)を絶対配置でtop:0px;で指定し、さらに
div.Annotation > div.index{position:absolute;top:0px;right:-150px;}
div.Annotation > div.note"{position:absolute;top:0px;left:-150px;}
などで指定します。
※先で、2columnにした時もHTMLを書き変えなくて済む。

★本題の画像リストですが、ブラウザによってmarginやpaddingの解釈が異なりますから、ul,liについて、margin,pading,displayの値を初期化しておくと楽です。
div.bodyText ul.imageList,div.bodyText ul.imageList li{
　　margin:0px; padding:0px;list-stye:none;
　　display:block;
}
div.bodyText ul.imageList li{
　　float:left;
　　width:;/* 違う場合はHTMLの要素内でstyle指定 */
　　height:;/* ここはすべて同じにする。 */
}

★floatでブロックの外に出てしまう対策
　ul.imageList > hr{visibility:hidden} /* 子セレクタ */
　ul.imageList hr{visibility:hidden} /* こちら(子孫セレクタ)の方が無難かも */

お礼

ご丁寧な回答、ありがとうございました。

＞そもそもfloatは本文内で画像などの周囲に本文を回り込ませるための物で、本来の目的外に使うのは？？です。

仰っていることの意味は理解できるのですが…、
3カラム実装におけるfloat利用は、某有名どころの参考書を始め、その他のレクチャーサイト様など複数でご掲載なさっている内容ですので、今回の質問の場でその是非に関する論議は、控えさせていただければ…と思います。

今回マークアップしていただいたように記述しますと、
そもそもがわたしの質問内容とは違ったレイアウトとなってしまいました…。
（お書き下さったままのクラス名を使用し、別ファイルでテストを行ってみたのですが…。もしかしたら途中途中の注釈を、わたしが間違って解釈しているのかも知れません。）

ありがとうございました。

回答No.3

metametamu

floatではありませんでしたか。

一応提示されているソースを見た感じ、ほとんど問題ないように思います。
もしかしたらスタイルのリセットをされているのかもしれませんが、気になったのはul要素にpadding:0;の指定がないことです。
可能性としてはHTMLの記述ミスとかでしょうか。

＞IEでは、直上の画像の“改行されるあたりからulごと”右側にズレています…
このあたりがよくわからないので再現できる最低限のソースだけ補足してもらえるともしかしたら回答できるかもしれません。
補足ついでに確認なのですが、問題が出ているブラウザはIEですか？バージョンもわかれば補足おねがいします。

補足

何度もお手を煩わせてしまってすみません…！
本当にありがとうございます(;ω;)

ちょっと長ったらしくなってしまったのですが、
今回組んでいる内容を、そのまま貼り付けさせていただきました
http://blog.goo.ne.jp/ray-chimin

＞気になったのはul要素にpadding:0;の指定がないことです。

ありがとうございます。
CSSの記述のいちばん最初に「*」でpadding:0;設定をしていたので、ひとつひとつのクラス等には記述しておりませんでした。今回のご回答をいただいた後に、念の為ulにも個別で追加してテストしてみましたが、特に変化がありませんでした…(。・ˇдˇ・。)すみません…。

＞問題が出ているブラウザはIEですか？バージョンもわかれば補足おねがいします。

問題が出ているのはIE8です。

以上、厚かましい限りですが、お時間のある際にでもどうぞ宜しくお願い致します…！

回答No.2

noname#123003

真ん中のは

margin:0 auto;
もしくは、

float:left;
margin:左のから空けたい分

のが後々楽かなと思います。

崩れる原因は多分ですが。。。li要素は多分floatで横に並べてますよね？
なら親要素の高さには含まれなくなってしまいますので、
ulの中の最後とかに<div style="clear:both"></div>を不細工だけどいれておくか、
ul要素にいわいるクリアフィックスのクラスを追加してやってください。

ちなみにulやliはブロック要素なのでデフォルトではwidth:100%のdivがあると考えて下さい。

クリアフィックス参考URL:
http://coliss.com/articles/build-websites/operation/css/css-new-clearfix-hack.html

読んだだけの回答ですが、どうでしょうか？

>divの不必要な多用？

文法上はよくないっちゃないですが、
あんまり気にしなくていいです。特に最初のうちは。

ただ、

>（ひとつひとつの画像をdivの中に入れたり、横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造）

この程度なら囲う必要はないと思います。

画像いっこいっこ囲うこと自体は、
親要素をつかって疑似トリミングしたりするときによく使われる技です。

お礼

12/13

色々と調べているうちに、

div.bnr190 ul {
display:inline-block;/*これを追加し、marginに関する記述を削除*/
width:590px;
text-align:left; }

div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}

で、無事に画像（インライン要素）の下のリスト（ブロック要素）もまっすぐに並べることができました…！

何度もいろいろと教えて下さって、本当に×(2)感謝しています(;ω;)
ありがとうございました！

補足

ご丁寧な回答、ホントウにありがとうございます！！

＞li要素は多分floatで横に並べてますよね？

それが、
display:inline;を使用しているので、floatは使っていないんです…(>_<)
ですので、今回はclearfixも使っておりません…；；

【190pxバナーを横に3個並べる】ことをしたいのですが、

div.bnr190 ul {
width:590px;
text-align:left;
margin-left:auto;
margin-right:auto; }

div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}

と書いてみたのですが、
Firefoxではキレイに揃っております。
IEでは、直上の画像の“改行されるあたりからulごと”右側にズレています…泣
※ともに#leftは必要以上に伸ばしていません。

何かお気づきの点がございましたら、何度もお手数で本当に申し訳ないのですが
宜しくお願い致します…！

回答No.1

metametamu

ul、li要素にfloat使われていませんか？その場合clearはされましたか？

お礼

12/13

色々と調べているうちに、

div.bnr190 ul {
display:inline-block;/*これを追加し、marginに関する記述を削除*/
width:590px;
text-align:left;}

div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}

で、無事に画像（インライン要素）の下のリスト（ブロック要素）もまっすぐに並べることができました…！

何度もいろいろと教えて下さって、本当に×(2)感謝しています(;ω;)
ありがとうございました！

補足

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

それが、
display:inline;を使用しているので、floatは使っていないんです…(>_<)
ですので、今回はclear等は使っておりません…；；