※ ChatGPTを利用し、要約された質問です（原文：IE6で段落ち）
IE6で段落ちする問題の対策方法
このQ&Aのポイント
IE6で段落ちする問題が発生した場合、CSSリキッドレイアウトやウィンドウ幅の調整など、いくつかの対策方法があります。
IE6で段落ちしないためには、IE6専用のスタイルシートを作成することも有効です。また、floatプロパティを利用して要素の配置を行う方法もあります。
皆さんのお知恵を拝借したいですが、IE6のバグを修正するには詳しい知識と経験が必要です。専門家やフォーラムでの相談をおすすめします。
CSSリキッドレイアウトのページを作成したいと思っています。
FirefoxやIE7では段落ちしないのですが、
IE6でウィンドウ幅を縮めたときに左ナビが段落ちしてしまいます。
IE6でも段落ちさせないためにはどうしたら良いものでしょうか。
何か足りない点があるのだと思いますが、
お知恵を拝借できないでしょうか。
お手数ですが、よろしくお願いいたします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSSレイアウトテスト</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="frame_wrapper">
<div id="frame_column-content">
<div id="frame_content">
コンテンツ部分コンテンツ部分コンテンツ部分
コンテンツ部分コンテンツ部分コンテンツ部分
コンテンツ部分コンテンツ部分コンテンツ部分
コンテンツ部分コンテンツ部分コンテンツ部分
コンテンツ部分コンテンツ部分コンテンツ部分
コンテンツ部分コンテンツ部分コンテンツ部分
<div class="visualClear"></div>
</div><!-- end of content -->
</div><!-- end of column-content -->
<div class="frame_portlet">
左ナビ左ナビ左ナビ
左ナビ左ナビ左ナビ
左ナビ左ナビ左ナビ
左ナビ左ナビ左ナビ
</div><!-- end of frame_portlet -->
</div><!-- end of frame_wrapper -->
</body></html>
main.css:
#frame_wrapper {
width: 99%;
margin: 0;
padding: 0;
}
#frame_column-content {
width: 99%;
float: right;
margin: 0 0 0 -20em;
}
* html #frame_column-content {
margin-right:-19.2px;
}
#frame_content {
margin: 0 0 0 20em;
background: white;
}
body {
margin: 0;
padding: 0;
}
.visualClear {
clear: both;
}
.frame_portlet {
width: 19em;
overflow: hidden;
}
お礼
tsunami02さん ありがとうございます！ overflow: hidden; を消したらうまく行きました。 大感謝です！