Question

Every time I move the browser the elements move, I would like it to stay in same position. Does anybody have a solution? Thanks in advance for your help. The JSfidle is here: http://jsfiddle.net/cntra/E7Ydz/19/

The [HTML] is as follows:

<div class="column">     <div id="text-display">           
<span id="targetElm">Your Daily Dose of Contrabang</span>
</div>

<div class="morphing-tinting">

<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contrabang">
<span class="image-wrap" style="position:relative; left: 0px; top:0;
display:inline-block;
background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center;width: 250px; height: 250px;"></span></a>

<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contraswag"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a>

<a href="#" class="changeTextClass" rel="targetElm|Your Daily Dose of Contradads"><span class="image-wrap " style="position:relative; left: 0px; top:0; display:inline-block; background:url(http://www.tailgatingideas.com/wp-content/uploads/2007/12/albert-einstein-1951.jpg) no-repeat center center; width: 250px; height: 250px;"></span></a></div>

<div class="cntratop">
      <li class="live"> <a target="_blank" href="#">CONTRABANG.TV</a></li>
      <li><a target="_blank" href="#">MUSIC</a></li>
      <li><a target="_blank" href="#">FASHION</a></li>
      <li><a target="_blank" href="#">FEATURES</a></li>
        <li><a target="_blank" href="#">REVIEWS</a></li>
      <li><a target="_blank" href="#">NEWS</a></li>
      <li><a target="_blank" href="#">VIDEOS</a></li>
      <li><a target="_blank" href="#">EVENTS</a></li>
      </div>

This is the [CSS]

    .cntratop{
        font-family: sans-serif;
        font-size: 12.5px;}

    .cntratop ul{
        list-style:none;
        margin-left: auto ;
        margin-right: auto ;
        text-align: center;}

    .cntratop li{
        display:inline-block;}

    .cntratop li:first-child{
        margin-left:0px;}

    /*navbar text*/
    .cntratop a{
        display:inline;
        padding:15px;
        text-decoration:none;
        color:#888888;
        cursor:pointer;}

    .cntratop a:hover,  
    .cntratopli.live a{
        font-weight:bold;
        color:#E94F78;
        }



    .column{
        background:transparent;
        width: 960px;
        margin-left: auto ;
        margin-right: auto ;
        text-align: center;
        padding: 0px;}

    .srch{
        background:transparent;
        width: 960px;
        margin-top: 5px;
        margin-left: auto ;
        margin-right: auto ;
        text-align: center;
        padding: 0px;}

    #search-box{
        list-style-type: none;
        display: inline;
        margin-left: 0px;
        margin-right:0px;
    }

    #search-form {
        background-color: transparent;
        position: relative;
     }

    #search-box input[type="text"] {
        width: 400px;
        font-family:Georgia;
        font-style: italic;
        font-size: 90.0%;
        padding: 0px 2 2px 10px ;
        color: #999;
        outline: none;}

    #search-text {
        font-size: 13px;
        font-family:Georgia;
        font-style: italic;
        border-width: 0;
        background: transparent;
    }


    #portfolio{
        display:inline;
           margin: auto; 
            text-align: center; 


    }
    #text-display
            {top:; position: relative;
            display:inline-block;
            padding:5px 10px; 
            font-family:sans-serif; 
            font-weight:bold; 
            font-size:50px; 
            color: white; 
            text-align: center; 
            line-height: 1.2em;margin:0px;
            background-color:#E94F78;
    }


    .morphing-tinting .image-wrap {
        position: absolute;

        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;

        -webkit-border-radius: 30em;
        -moz-border-radius: 30em;
        border-radius: 30em;
    }

    .morphing-tinting .image-wrap:hover {
        -webkit-border-radius: 30em;
        -moz-border-radius: 30em;
        border-radius: 30em;
    }

    #socialNetworks{
        float:right;
        margin-top: 110px;
        margin-bottom:60px;
    }

    .twitterBtn{
        float:left;
        background-image:url(images/twitter.png);
        background-position: top left;
        border:none;
        display:block;
        margin-left:15px;
        width:24px;
        height:22px;    
    }
    .twitterBtn:hover {
        background-position: bottom left;
    }

    .facebookBtn{
        float:left;
        background-image:url(images/fb.png);
        background-position: top left;
        border:none;
        display:block;
        margin-left:15px;
        width:24px;
        height:22px;    
    }
    .facebookBtn:hover {
        background-position: bottom left;
    }
      #project{
       margin-left: auto;
        margin-right: auto;
        padding: 0px 0px 0px 0px;
        height:200px;
        width:310px;
        display: inline;
        overflow:hidden;//trick to ensure all elements fit in portfolio
    }

    .workEntry{ 
        width:310px;
        overflow:hidden;
        float: left;
    }

    #thumbAttachment{
        float:left;
        width: 310px;
        height:200px;
        overflow: hidden;
    }

    #inThumb{
        margin-left: auto;
        margin-right: auto;
    }


    #blackCross{
        float:left;
        width: 310px;
        height:200px;
        margin-top:-200px;
        khtml-opacity:0;
        -moz-opacity:0;
        -ms-filter:"alpha(opacity=0)";
        filter:alpha(opacity=0);
        opacity:0;

    }

    #blackCross:visited{

        khtml-opacity:0;
        -moz-opacity:0;
        -ms-filter:"alpha(opacity=0)";
        filter:alpha(opacity=0);
        opacity:0;
    }

    #blackCross:hover{
        khtml-opacity:1;
        -moz-opacity:1;
        -ms-filter:"alpha(opacity=100)";
        filter:alpha(opacity=100);
        opacity:100;
    }



    #backToTop{
        width:61px;
        height:30px;
        float:left;
        margin-left:515px;
        margin-top:-27px;   
    }



    #allsharer{
        float: right;
        margin: 17px 158px 0 0;
    }

    .twitter-share-button {
        width: 92px !important;
    }

    .fb-button {
        position: relative;
        top: 2px;
    }

Answer 1

Give your wrapper a min-width, and declare a max-width/width. You will get a horizontal scrollbar, but your ‘elements’ will stay in position. Your ‘elements’ naturally flow with the viewport size, so if you shrink the browser, the ‘elements’ are supposed to move with the flow. If you declare that the viewport is a certain size, then the flow will move within the new size.

Hope this helps.

P.S. – IE7/8 doesn’t like min-width or max-width, so you will have to either use Modernizr, or Google for a CSS hack.