Css fixed div area

Question

Hello everyone I have fixed div area. I put these fixed divs in a one div which I call "page" here is css:

.page {
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

But when I check my design with different resolution fixed div area go far from my "page" div

and here is fixed div css:

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position:fixed;
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position:fixed;
}

Answer 1

"But when I check my design with different resolution fixed div area go far from my "page" div" .

this is because when you set an element's position as fixed, its position is calculated relative to the screen, in your case, the elements would always be positioned at:top:244px; left: 5.4%; and top:385px; left:70px; from the screen.

My suggestion would be to position them absolutely (using position:absolute;) and then detect (using JavaScript) if the width of the viewer's screen is greater than your document's width (in your case, that would be 964px), and if it is, then change the position of rockets to position:fixed;

here is jQuery code for my suggestion above:

<script type="text/javascript">
    $(document).ready(function(){
        if($(window).width()>=964){
            $('#rocket_left').css('position','fixed');
            $('#rocket_left').css('position','fixed');
        }
    });
</script>

and here is the css you should use (as posted by MarvinLabs):

.page {
    position: relative; /* Position context for the rockets */
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position: absolute; /* Absolute positionning within the page */
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position: absolute; /* Absolute positionning within the page */
}