CSSテクニックコミュのCSS段組レイアウトとtableタグの組み合わせ

初めて質問させていただきます。

できるだけCSS段組レイアウトに移行するために、tableレイアウトからスタイルシートで段組にしました。

しかし、2段目の任意の位置にtableタグを使うと、
IEでの印刷プレビューで確認したところ、その表の手前で段組内から外れて、右下にずれてしまいます。

CSSでの記述を抜粋します。
menu・・・左側の各種コンテンツへのリンク
main・・・メインコンテンツ

div#menu {
width:210px;
float: left; background-color:#DCDCED
}
div#menu h5 {text-align: center; font-size:100%; margin-top:0; margin-bottom:0;color: #FFFFFF; padding: 3; background-color: #8080C0; font-weight:bold; margin-top:0; margin-bottom:0}
a.widelink{
text-decoration:none;
display : block;
padding : 3px;
border:1px solid #DCDCED;
color: #6060B0;
}
#menu p{margin-top:0; margin-bottom:0}
a:visited.widelink{
text-decoration:none;
color:#6060B0;
}
a:hover.widelink{
border:1px solid #8080C0;text-decoration:none; background-color: #C1C1FF; color: #6060B0;
}

#main {
margin-left:210px;padding:5
}

<div id="main">
の次に、いきなりtableタグを使うと大丈夫ですが、
その後に通常のテキスト（<p>タグとか）が入り、その後に
さらにtableタグを使うと、全体からはみ出て右下に配置されるのです。

ブラウザ表示自体は問題ないのですが、
なぜ印刷するとこのようになるのか、アドバイスよろしくお願いします。

コメント(2)

最初
全て
最新の40件

[1] mixiユーザー 05月04日 21:01

メディアにprint入れる、とか。携帯からなんでよくわかりませんが

[2] mixiユーザー 05月14日 23:15

全体に別のスタイルで囲むことによって解決しました。

追加スタイル
#contents {background-color:#DCDCED}

<div id=contents>
<div id=menu>左側</div>
<div id=main>右側</div>
</div>

すると、右側にtableタグを入れても段違いにならなくなりました。

ログインすると、みんなのコメントがもっと見れるよ