Question

I have a CSS layout as in this picture.

I’d like to achieve the following behaviour

img should be always below left sidebar (as in the picture). Problem is that left sidebar contains a list of collapse/expand links and when you expand it the img overlaps with left sidebar and text is unreadable.

thank you

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