CSS: How to move-up #thumbnails between #header and #content with CSS (no JavaScript,dynamic width and height,not changing HTML)?

How to move-up #thumbnails between #header and #content with CSS (no JavaScript), without changing HTML and keeping dynamic width and height for all div tags?

Code able in 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>

C开发者_JAVA技巧SS:

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;
}

Expected result (cross-browser, dynamic width and height, no JS, no HTML changes):

    1. header
    2. thumbnails
    3. content

Live Demo

Rather dirty as it isn't dynamic height but it is a proof of concept, All i did was add:

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

Live Demo with JS - No JQuery now. Thanks to @AndyE for non JQ version

Cannot be done without knowing the height of #thumbnails, since that's the amount of pixels you have to "move" #content downwards (either through positioning or margin-top).