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;
}
投稿日時 - 2008-06-16 23:14:17
0人が「このQ&Aが役に立った」と投票しています
