Я борюсь с проблемой плавающего IE6. (Я знаю, что IE6 отстой, но моя огромная компания использует его ...) Я создал простой макет заголовка, основного текста, нижнего колонтитула с областью содержимого и боковой панелью внутри тела. По сути, общий макет блога.
У меня не было проблем с достижением этого в IE6, но в области содержимого я пытался создать выделенную область сверху вниз, а затем под ней на два делителя рядом друг с другом. В современных браузерах это выглядит хорошо, но в IE6 второй уровень помещается ниже первого. Например, div слишком велики для контейнера, поэтому он выдвигает второй. Но это не должно быть проблемой, так как они оба достаточно малы (ширина, отступы, поля), чтобы соответствовать ..
А вот и мой код:
HTML
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
<div class="clear"></div>
<div id="#1">
</div>
<div id="#2">
</div>
</div><!--Content End-->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!--Body Content End-->
</div><!--Page Wrap End-->
</body>
CSS
#page-wrap {
width: 960px;
margin: 0 auto;
background-color: #fff;
}
#header {
width: 954px;
height: 50px;
padding: 10px 0;
margin: 0 3px 2px 3px;
border-bottom: #7E7871 dotted 3px;
}
#content {
float: left;
width: 650px;
margin: 0;
padding: 15px 5px 0 15px;
}
#feature {
width: 650px;
margin: 0;
}
#content #1 {
border-right: thin solid #CCC;
width: 305px;
margin: 0;
padding: 0;
float: left;
}
#content #2 {
width: 305px;
margin: 0;
padding: 0;
float: right;
}
#sidebar {
float: right;
width: 250px;
padding: 0 10px 20px 10px;
margin: 0;
background: url(../_images/bg_aside.gif) repeat-y;
}