Изображение под боковой панелью

Question

У меня есть макет CSS, как на этой картинке.

Я бы хотел добиться следующего поведения

img всегда должно быть ниже левой боковой панели (как визображение).Проблема в том, что левая боковая панель содержит список сворачиваемых / раскрывающихся ссылок, и при ее развертывании img перекрывается с левой боковой панелью, а текст не читается.

спасибо

Answer 1

HTML

<div id="container">
    <div id="header">ert</div>
    <div id="left-sidebar">sdfsdfsdft
        <div id="img">IMG</div></div>
    <div id="right-sidebar">ert</div>
    <div id="content">aaert</div>
</div>

CSS:

#container {
    width:100%;
    height:100%;
}
#header {
    background: url("img.png") red;
    background-repeat: no-repeat;
    background-position: right top; 
    height: 125px;
    margin:-10px -10px 0px -10px;
}

#left-sidebar {
    left: 0; 
    height:2000px;
    width:200px;
    background-color: yellow;
    position: fixed;
}

#right-sidebar {
    right:0;
    position: fixed;
    width:200px;
    height:2000px;
    background:green;
}
#img {
    border:1px solid;
    position: relative;
    top:5px;
    left:0px;
    margin-left:10px;
    width:175px;
    height:175px;
}

#content {
    margin-left:-10px;
    position: absolute;
    margin:auto;
    top:130px;
    left:208px;
    right:208px;
    border:1px solid;
    Height:100%;
}