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

HTMLとCSSについて質問です。。
下記のようにコードを書いた場合、文字を拡大したときに「div id="maincontents"」の中の文字等がふくれあがって、「div id="sidebar"」が下に落ちてしまいます。
どうしたら下に落ちないですみますでしょうか?

※InternetExploreで起ります。他のブラウザでは起りません。
※フォントサイズはあえて固定していません。

◆HTML

<div id="container">

<div id="maincontents">
</div>

<div id="sidebar">
</div>
</div>

<div id="header">
</div>

◆CSS
div#header{
position:absolute;
top:0px;
}
div#container{
width:760px;
background-color:#e5ecf8;
}
div#maincontents{
width:75%;
float:left;
background-color:#FFFFFF;
}
div#sidebar{
width:25%;
float:right;
}



●質問者: tetlis
●カテゴリ:インターネット ウェブ制作
✍キーワード:absolute background-color CSS HTML sidebar
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● あらた
●10ポイント

どういったバグだったかは覚えていませんが、これIEでよく起こるバグです。


なので、

div#maincontents{

width:75%;

float:left;

background-color:#FFFFFF;

}

div#sidebar{

width:25%;

float:right;

}

のwidthを70%と25%など、合計が100%にしなければとりあえずは修復できると思います。

http://www.yahoo.co.jp/

◎質問者からの返答

ダメでした。相変わらず、文字を拡大すると「div id="maincontents"」がふくれあがって、「div id="sidebar"」が下に落ちてしまいました。


2 ● stnet
●60ポイント ベストアンサー

IEの「半角英数字が連続したテキストの折り返しをしない」バグのせいでしょうかね?

div#maincontentsに overflow:hidden; を追加したらどうでしょうか?

あふれた分が非表示になってしまいますが.

http://www.geocities.jp/multi_column/float/07.html

関連質問


●質問をもっと探す●



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