【CSS】IE6で印刷時にレイアウトが崩れる

質問

大変困っています。
印刷を前提に作ったページではないのですが、
クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。
そこで、IE6とFirefoxで確認したところ、
Firefoxではレイアウトが崩れずきちんと印刷されますが、
IE6では2カラムの右側（メイン部分）が消えてしまっています。
（IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。）
何か問題があれば、ご指摘お願い致します。

<div id="container" class="clearfix">

<div id="siteSub">
ああああああ
</div>

<div id="siteMain">
いいいいいい
</div>

</div>

■CSS--------------------------------
div#container{
width: 950px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
div#siteSub{
margin: 0px;
padding: 0px;
width: 230px;
display: block;
float: left;
}
div#siteMain{
padding: 0px;
float: left;
width: 710px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}

右側のメイン部分が消えてしまっているので、
大雑把にレイアウト部分だけ書いてみました。
siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。
linkの部分は media="all"としています。
<link rel="stylesheet" type="text/css" href="css/import.css" media="all">
また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。

回答No.3

kuzumiHK

単純に、両方ともfloat:leftになっていることと、
widthとmarginの合計が960pxになっていて、
段が崩れているからではないでしょうか。

div#siteMainのfloatをrightに、
widthを700pxにするなどでいかがでしょう。

回答No.2

abril

サンプルをそのまま（＋cleafixのclassを加え）貼り付けて印刷してみましたが、「IE6では2カラムの右側（メイン部分）が消えて」という状態にはなりませんでした（書式はXML宣言有りのXHTML 1.1）。

コンテンツ全体の幅が950pxとかなり広いので、A4縦に100%では当然入りきらないので「（はみ出す）メイン部分の右端が切れて」印刷はされますが。でもこの状態はFirefox2.0～でも同様です。質問者様の抱えているトラブルは「メイン部分が完全に印刷されない」という状態なのでしょうか？であればちょっと解せないですね…。A4横にする、もしくは100%ではなく縮小印刷をする、としても「消えて」いますか？

> 何か問題があれば、ご指摘お願い致します。
> siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。

ご提供されたCSS・HTMLを見る限りは特に問題があるとは思えません。コラム幅の合計も合っている様ですし、floatについても、clearfixを併用されていますし。

印刷に関するスタイルの不具合は、ANo.1の回答者様もご指摘の通り、printメディア用にCSSを振り分けて対処するしかないのですが、「消えて」という状態がIE6からのプリント時に起こらないので、今のところ具体的なアドバイスができないのですが…試しにprintメディア用だけ、"div#siteSub"に"display: none;"を追加して印刷してみて下さい。印刷時にはメイン部分だけになる（この状態でも右端が少し切れるとは思いますが）筈ですが、それでもメイン部分が「消えて」しまいますか？

回答No.1

egoblock

印刷用のcssを作って読み込ませるのが一般的だと思います。