IE: Как отобразить div с абсолютным позиционированием под div с относительным позиционированием

Question

В настоящее время я создаю макет, который требует div с фоновой графикой, а также сверху и снизу.Моя разметка, которую я создал, прекрасно работает в FF и выглядит так:

#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}

#upper_bg {
    background:url(images/header_top.png);
    position:absolute;
    height:200px;
    width:520px;
    z-index: 1000;
    margin: -2px;
}

#row_wrapper {
    position:relative;
    float: left;
    z-index: 3000;
}

#lower_bg {
    background:url(images/header_bottom.png);
    position:absolute;
    bottom:0px;
    height:200px;
    width:520px;
    z-index: 1000;
    margin: -2px;
}

<div id="wrapper">
   <div id="upper_bg">
      <!-- ie fix for displaying empty divs -->
   </div>
   <div id="row_wrapper">
      ... content!
   </div>
   <div id="lower_bg">
      <!-- -->
   </div>
</div>

В IE (7,8 и 9), однако, div и upper_bgневидимый.Кто-нибудь знает, как это исправить?

Answer 1

решил проблему. Действительно, показанный HTML в моем вопросе не воспроизводил результат. Немного повозившись, я обнаружил, что IE находится в режиме причуд. Я создал html через xslt и забыл добавить тег xsl: output и установить его в html. После этого IE был в порядке вплоть до версии 7 с макетом.

Answer 2

Добавить очистить ...

<div id="lower_bg">
      blabla floating divs
      <div style="clear:both"></div>
</div>