※ ChatGPTを利用し、要約された質問です（原文：hover擬似要素をかけるとfloatでの段組が崩れる）
hover擬似要素でfloatした段組が崩れる
hover擬似要素をかけるとfloatでの段組が崩れる
宜しくお願い致します。
以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6（他ブラウザは現在確認出来ていません）でマウスを乗せると、floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んでしまいます。
原因にお気付きの方は、どうかご指摘頂けます様、お願い致します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift-JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
/* 全体 -------------------------------------------------- */
body {
background-color: ivory;
width: 800px;
margin: auto;
font-size: small;}
/* コンテナ -------------------------------------------------- */
div#container {
width: 948px;
border-left: 1px solid maroon;
border-right: 1px solid maroon;
background-color: white;}
/* 段組 -------------------------------------------------- */
div#main {
width: 700px;
padding: 10px;
float: right;
border-left: dashed 1px maroon;}
div#navigation {
padding: 10px;}
/* clearfix */
div#contents:after {
content: ".";
display: block;
clear: both;
height: 0px;
font-size: 0px;
visibility: hidden;}
div#contents {
display: inline-block;
min-height: 1%;}
/* Mac版IE用ハック開始 \*/
* html div#contents {height: 1%;}
div#contents {display: block;}
/* Mac版IE用ハック終了 */
/* 見出し -------------------------------------------------- */
h1 {
background-color: maroon;
font-size: xx-large;
color: #ff9999;
margin: -10px -10px 0px -10px;
padding: 13px 13px 3px 13px;
text-align: center;}
/* ナビゲーション -------------------------------------------------- */
div#navigation ul {
margin: 0px 0px 0px -10px;}
div#navigation li {
list-style-type: none;
margin: 10px auto;
width: 160px;}
div#navigation a {
text-decoration: none;
display: block;
width: 100%;
font-weight: bold;
color: #ff9999;
padding: 3px;
text-align: center;
background-color: maroon;
border: outset 3px maroon;}
div#navigation a:hover {
border: inset 3px maroon;}
/* フッター -------------------------------------------------- */
address#footer {
margin: 0px -10px -10px -10px;
padding: 3px 13px 13px 13px;
background-color: maroon;
color: #ff9999;
text-align: right;}
-->
</style>
</head>
<body>
<div id="container">
<h1>ページタイトル</h1>
<div id="contents">
<div id="main">
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
<div id="navigation">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">abc</a></li>
<li><a href="" title="">def</a></li>
<li><a href="" title="">ghi</a></li>
<li><a href="" title="">jkl</a></li>
<li><a href="" title="">mno</a></li>
<li><a href="" title="">pqr</a></li>
</ul>
</div>
</div>
<address id="footer">フッター</address>
</div>
</body>
</html>
お礼
本当は、こう（以下の修正ソース）したかったんです（汗）。 おっしゃって頂いたfloat周辺の問題でした。floatされた左右カラムの要素と、displayをblockにしていたa要素周辺のwidthの問題みたいでした。 本当に、有難う御座いました。そして、お騒がせ致しました。 safari環境は無いのですが、火狐で確認したら、今回は大丈夫みたいです（汗）。 /* 全体 */ body { background-color: ivory; width: 950px; margin: auto; font-size: small;} /* コンテナ */ div#container { width: 948px; border-left: 1px solid maroon; border-right: 1px solid maroon; background-color: white;} /* 段組 */ div#main { width: 707px; padding: 10px; float: right; border-left: dashed 1px maroon;} div#navigation { width: 200px; padding: 10px; float: left;} /* clearfix */ div#contents:after { content: "."; display: block; clear: both; height: 0px; font-size: 0px; visibility: hidden;} div#contents { display: inline-block; min-height: 1%;} /* Mac版IE用ハック開始 \*/ * html div#contents {height: 1%;} div#contents {display: block;} /* Mac版IE用ハック終了 */ /* 見出し */ h1 { background-color: maroon; font-size: xx-large; color: #ff9999; margin: 0px; padding: 3px; text-align: center;} /* ナビゲーション */ div#navigation ul { margin: 0px; padding: 0px;} div#navigation li { list-style-type: none;} div#navigation a { text-decoration: none; display: block; width: 160px; margin: 10px auto; font-weight: bold; color: #ff9999; padding: 3px; text-align: center; background-color: maroon; border: outset 3px maroon;} div#navigation a:hover { border: inset 3px maroon;} /* フッター */ address#footer { padding: 3px; background-color: maroon; color: #ff9999; text-align: right;}