Здравствуйте!
Никак не могу победить проблему. Может быть, кто-то знает решение?

Суть:
Есть двух колоночная разметка страницы, состоящая из классических блоков div: #header, #content, #sidebar и #footer.
#sidebar — справа.

Для лучшей поисковой оптимизации порядок следования блоков в html следующий:

#header
#content
#sidebar
#footer

Разметка div на одном уровне выполняется с помощью float. Таблицы не используются.

Необходимо, чтобы #sidebar имел фон (background) во всю страницу до самого #footer, но не пересекал его границы.
При этом содержимое #content может быть выше содержимого #sidebar.

Для решения задачи использую дополнительный блок div — #middle, а также css background-image.
Вот схематичный код html:

<div id="header">...</div>
<div id="middle">
    <div id="content">...</div>
    <div id="sidebar">...</div>
</div>
<div id="footer">...</div>

Вот ключевые моменты кода css:

#content{
   float: left;
   width: 650px;
}
#sidebar{
   float: right;
   width: 300px;
}
#footer{
   clear: both;
}
#middle{
   background: url(images/bg.gif) repeat-y right top;
   border: 1px solid red;
}

Вроде всё должно работать, как надо, но не работает.
Дело в том, что блок #middle почему-то сжимается в линию (это можно увидеть, благодаря border). В итоге #content и #sidebar располагаются под ним, а должны располагаться в нём.

Можно ли как-то решить эту проблему, не отказываясь от float и порядка следования блоков в html?