У меня есть страница со стандартной панелью навигации слева и областью содержимого, занимающей остальную часть горизонтальной области в сторону. Для современных браузеров я использую значения строк таблицы и ячеек таблицы для атрибута отображения. Однако для IE7 я включил условную таблицу стилей, которая пытается перемещать панель навигации.
Это прекрасно работает, за исключением случаев, когда в самой области содержимого есть плавающие элементы, и я пытаюсь использовать clear. Моя цель состоит в том, чтобы отображать элемент очистки сразу после всплытия области содержимого, но вместо этого он опускается ниже области навигации.
Следующая демонстрационная программа показывает эту проблему. Моя цель - сделать так, чтобы таблица отображалась прямо под «leftThing» и «rightThing», но вместо этого между ними и таблицей существует большой разрыв.
<html>
<head>
<title>Float Test</title>
<style type="text/css">
#body {
background: #cecece;
}
#sidebar {
background: #ababab;
float: left;
width: 200px;
}
#content {
background: #efefef;
margin-left: 215px;
}
#leftThing {
background: #456789;
float: left;
width: 100px;
}
#rightThing {
background: #654321;
float: right;
width: 100px;
}
table {
clear: both;
}
</style>
</head>
<body>
<div id="body">
<div id="sidebar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="content">
<div style="position: realtive;">
<div id="leftThing">
ABCDEF
</div>
<div id="rightThing">
WXYZ
</div>
<table>
<thead>
<th>One</th>
<th>Two</th>
</thead>
<tr>
<td>Jason</td>
<td>45</td>
</tr>
<tr>
<td>Mary</td>
<td>41</td>
</tr>
</table>
<p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p>
</div>
</div>
</div>
</body>
</html>
Спасибо за вашу помощь.