いつもお世話になります。
css で float: left; を使って作ったページをプリントすると、
ページの境目でレイアウトが崩れてしまいます。
具体的にはキーワードとその説明がそれぞれ左側と右側にあるのですが、
キーワードの div の高さが足りないため、ページの境目で説明の div が
float: left; されてページの左はしから始まります。
説明が下手で申し訳ないのですが、
以下のコードからブラウザで見て頂いた方が解り易いかと思います。
アドバイスあればよろしくお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.keyword {
border: 1px solid red;
float: left;
width: 200px;
}
.definition {
border: 1px solid blue;
float: left;
width: 450px;
}
.space {
border: 1px solid green;
height: 790px;
}
.word_container {
border: 1px solid pink;
}
.clear {
clear: both;
}
-->
</style>
</head>
<body>
<div class="space"></div>
<div class="word_container">
<div class="keyword">keyword</div>
<div class="definition">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="clear"></div></div>
<div class="word_container">
<div class="keyword">keyword</div>
<div class="definition">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="clear"></div></div>
<div class="word_container">
<div class="keyword">keyword</div>
<div class="definition">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="clear"></div></div>
</body></html>
お礼
とても参考になりました。 自分でもその後もう一度考えてみましたが、 説明の div を float: right; にすることでも解決しました。 アドバイスありがとうございました。