Search code examples
htmlcssresponsive-designcss-positionfixed

CSS -align 3 responsive Divs- left right with position fixed and center normal


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

Solution

  • 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

    JS Fiddle