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

CSSのIE6とflaotとwidth:100%;について質問です。
divA{width:50%; float:left;} と divB{width:50%; float:right;} と指定して、divAとdivBを可変式でぴったり横に並べたいのですが、Win IE6とMac IE5.2では、横に並ばずに下に回り込んでしまうケースがあります。
IEでは、divのwidthが合計で100%になると回り込みが正常に動作しないケースがあると聞きました。
デザインの都合上、divAとBの合計は100%で作りたいと考えています。

不具合や解決法の詳細があるサイトを教えてください。

●質問者: Kurobuchi
●カテゴリ:ウェブ制作
✍キーワード:CSS DIVA IE IE6 Mac
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● ke_ishi
●16ポイント

cssに以下の指定を追加してみては?

body{ margin: 0; }

◎質問者からの返答

ありがとうございます。

レイアウトの都合で、body{ margin: 20px;}が理想です。

body{ margin: 0;}も試してみました。一見問題なく表示されたのですが、ウィンドウサイズを動かすと回り込みができない現象がでています。(リキッドデザインで作っています)(横にちゃんと並ぶ時と下に送られてしまう場合があります)

ちなみにどちらのdivも48%の幅にすると全く問題ありません。でもぴったり並べたレイアウトを実現したいです。


2 ● kilinji
●16ポイント

divAとdivBの外にその二つを統括するdivABが必要ですね。

もし統括するdivABをなしにするならば、

divBの「right」をはずして、「margin-left: 50%」でどうにかなる予感がします。

はずれであればポイント不要です。

◎質問者からの返答

ありがとうございます。

divABはすでに設定していまして、その幅は100%としています。

divABのさらに親要素に、divContentがあり、その幅はbodyの66%でfloat:left;としています。

残念ながらうまく動作しませんでした。


3 ● KIROW
●16ポイント

http://adp.daa.jp/archives/000265.html

ADP: IE6のwidth解釈バグ対処法

IEではmargin,paddingの解釈にバグがありますね

margin=0 にできないなら入れ子でもう一つ中にボックスを作ってそれでmargin指定するというのはどうでしょう

ちょっと煩雑になるかもですが・・・

http://easygoing.under.jp/bug/bug02.html

Public CSS - sorry,but not found.

◎質問者からの返答

ありがとうございます。

指定してみましたが残念ながらうまくいきませんでした。

やはり、両divボックスの合計幅が100%になると崩れてしまうのでしょうか?


4 ● diabah_blue
●16ポイント

http://www.stylesheet-stylebook.com/archives/000041.php

stylesheet-stylebook.com

IE6を考慮する限り、100%には出来ないようです。

少なくともdivA,divBの両方を左寄せにすれば、「ぴったり」になります。ただし、少しだけ中心からずれてしまいますけど。

3番目のURLに妥協案のサンプルを置いてみました。

よろしければご覧下さい。

http://www.2-21.com/extra/css_tips001.html

iStudio 2|21: CSS スタイルシート雑技 No. 1 CSS で段組みレイアウトを作る

http://cubic9.com/test/hatena/float100/

はてな 1103859487 IE6とfloatとwidth:100%

◎質問者からの返答

ありがとうございます。

デモまで作成いただき感激しています。

後ほど幅49%のCSS HACKでチャレンジしてみます。


5 ● amanoftaste
●16ポイント

合計幅を100%にすると崩れるのは、

border等のせいだと思います。

前見た本に同じことが書いてありました。

あと、divAをfloat:left;、divBをfloat:right;と、

指定する必要はありません。

両方ともfloat:left;でかまわないと思います。

◎質問者からの返答

ありがとうございます。

borderなどの設定を外してみて試してみたいと思います。


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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