CSS: Как переместить #thumbnails между #header и #content с помощью CSS (без JavaScript, динамической ширины и высоты, без изменения HTML)?

Question

Как переместиться на #thumbnails между #header и #content с помощью CSS (без JavaScript), без изменения HTML и сохранения динамической ширины и высоты для всех тегов div?
Код в состоянии в http://jsfiddle.net/laukstein/XdJxu/

HTML:

<div id=container>
    <div id=header>1. header</div>
    <div id=content>3. content</div>
    <div id=thumbnails>2. thumbnails</div>
</div>

CSS:

html,body,* html #container{height:100%;}
html,body{
    margin:0;
    padding:0;
    overflow:inherit;
}
#container{
    width:80%;
    min-height:100%;
    margin:0 auto;
    background-color:#ccc;
}
#content{
    background-color:#ececec;
}
#thumbnails{
    background-color:#ffdc71;
}

Ожидаемый результат (кросс-браузер, динамическая ширина и высота, без JS, без изменений HTML):

    1. header
    2. thumbnails
    3. content

Answer 1

Демо-версия

Довольно грязно, так как это не динамическая высота, но это доказательство концепции, Все, что я сделал, это добавил:

#content{
    margin-top:15px;
}
#thumbnails{
    margin-top:-35px;
}

Демонстрация в реальном времени с JS - Нет JQuery сейчас. Спасибо @AndyE за не JQ версию

Answer 2

Невозможно сделать, не зная высоту #thumbnails, так как это количество пикселей, которое вам нужно «переместить» #content вниз (либо путем позиционирования, либо через margin-top).