i just cant make those left right fixed divs responsive. 3 divs : |fixed| |normal| |fixed| those 3 divs are in one div. if im going on full scale window they are working perfectly, but as i down size the window it's screws the all thing up. i dont know how to fix that- my center div working perfectly- responsive and centered. but the left and right fixed just wont be responsive as well. i guess the solution is connected to responsive width of the fixed divs.. any ideas? i added JSFIDDLE example for your convenient :
this is the structure :
<div>
<div **fixed** left> <img> </div>
<div **normal** center> 2 divs for left and right inside the center div </div>
<div **fixed** right> </div>
</div>
REAL html :
<div id="div_header">
<div class="cloumn right" id="div_right"><img src="http://placehold.it/250x600"></div>
<div class="cloumn center" id="div_center">
<div id="inside_center">
<div class="left_side" id="left_inside_center">
</div>
<div class="right_side" id="right_inside_center">
<h1> headline </h1>
<img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg">
</div>
</div>
</div>
<div class="cloumn left" id="div_left"><img src="http://placehold.it/250x600"></div>
</div>
</div>
REAL CSS:
body {
margin-top: 0 !important;
direction: rtl;
}
#right_inside_center img {
width: 97%;
margin-top: 7px;
}
#left_inside_center {
float:left;
width:inherit;
}
#right_inside_center {
float:right;
width:65%;
}
#inside_center {
height: auto;
overflow: hidden;
}
#div_header {
text-align: center;
display: table;
width: 100%;
table-layout: fixed;
}
.cloumn {
display: table-cell;
}
.center {
background:green;
height: 1500px;
width: 60%;
}
.left {
position: fixed;
width: 18%;
}
.right {
position: fixed;
width: 18%;
}
setting the width of the images to 100%
will fit the images in the parent and made some minor changes to width
of left and right