3カラムのカラム落ちについて質問です。

質問

3カラムのカラム落ちについて質問です。
IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。

ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。

<div id="wrap">
　<div id="left">左カラム</div>
　<div id="left">メインカラム</div>
　<div id="left">右カラム</div>
</div>

という形です。

--CSS--

#wrap{
width: 970px;
margin: 0 auto;
background-color: #FFFFFF;
height: 100%;
min-height: 100%;
position:relative;
overflow: hidden;
}

#left{
width: 175px;
margin: 15px 15px 0 15px;
padding: 0;
float: left;
display: inline;
}

#contents{
width: 560px;
float: right;
margin-top: 15px;
display: inline;
clear: right;
}

#right{
width: 175px;
margin: 15px;
float: right;
display: inline;
clear: right;
}

です。

それぞれの中にはmargin
やpaddingを使っています。
2日間それで悩まされていますができずに困っています。

IE6以外はすべて大丈夫なので、分かるかた教えてください。

回答No.5

naokita · ベストアンサー

display: inline;でしたか。失礼。
------------------------
全角スペースは単なるここだけのインデントかと思いましたが、
リアルでも使ってそうですね・・・
clear: right; も何故ここで使うのか？

＞paddingを使っています。
との事と、
padding: 0;　となっているので、
この辺の数値調整をしてるせいだとも思いましたので、NO.3の設定を書いたのですが、
position:、padding:
この辺の微調整で色々不具合が出そうですね。

#1さんのまま修正すると良いでしょう！

補足

皆さんの意見とネットで調べて変更をしたのですが、それでもカラム落ちしています。
入れ子にして、中の方にmarginをとってみました。

<div id="left">
<div id="left_01">左カラム</div>
</div>

<div id="contents">メインカラム</div>

<div id="right">
<div id="right_01">右カラム</div>
</div>

----css----

/*------------------
left
------------------*/

#left{
width: 205px;
padding: 0;
margin: 0;
float: left;
display: inline;
position: relative;
}

#left_01{
width: 175px;
padding: 0;
margin:0 13px 0 13px;
position: relative;
}

/*------------------
contents
------------------*/

#contents{ /*その他のブラウザ対応*/
margin: 0px;
padding: 0px;
float: left;
display:inline;
width: 560px;
position: relative;
}

*html #contents{ /*IE6対応*/
width: 560px;
float: left;
position: relative;
}

/*------------------
right
------------------*/

#right{ /*その他のブラウザ対応*/
margin: 0px;
padding: 0px;
float: right;
display:inline;
width: 205px;
position: relative;
}

*html #right{ /*IE6対応*/
width: 205px;
position: relative;
float: right;
}

#right_01{
width: 175px;
padding: 0;
margin: 0 13px 0 13px;
position: relative;
}

これでも直らないのでどなたか分かる方教えてください。
よろしくお願い致します。

回答No.4

cokesobbat

いやいやいや、フロート時のIE6の対策はちゃんと「display: inline;」で行われてますよ！
それを踏まえて新しくボックスを作るのは自由ですが。
↓↓

回答No.3

naokita

検証していませんが、
おそらくその場合のケースだと、
float + margin にするには、IE6用ハックが必要。
もしくは、
内包するdivを作って float と margin や padding , border を一緒にしない事。
外divをfloatとwidth。 内divにその他のCSS。

<div id="wrap">
<div><div>左カラム</div></div>
<div><div>メインカラム</div></div>
<div><div>右カラム</div></div>
</div>

回答No.2

cokesobbat

1です。
このフォームは半角が冒頭に有ると消えてしまうんですね^^;
とりあえずhtmlを書くときに全角スペースは事故の元といいたかっただけです。

回答No.1

cokesobbat

正しいhtmlはこれ。（id名と２～４行目にあった全角スペースが間違い。)

<div id="wrap">
↓全角スペースってここ
<div id="left">左カラム</div>
<div id="contents">メインカラム</div>
<div id="right">右カラム</div>
</div>

--CSS--

#wrap{
width: 970px;
margin: 0 auto;
background-color: #FFFFFF;
height: 100%;
min-height: 100%;
position:relative;
overflow: hidden;
}

#left{
width: 175px;
margin: 15px 15px 0 15px;
padding: 0;
float: left;
display: inline;
}

#contents{
width: 560px;
float: left; /*rightだと順番が変わっちゃうので*/
margin-top: 15px;
display: inline;
/*clear: right; これはいらない */
}

#right{
width: 175px;
margin: 15px;
float: right;
display: inline;
/*clear: right; これもいらない */
}