How to get text to stay in position on browser and device scale

Question

I got this copy that im needing to put in a footer. I can position the .special how i like nicely when the browser is set to 1920px view, however if I change the resolution or device I am looking at the position of the text starts to shift out of position. I have tried using percentages but when it reaches a certain point it still is not at the desired static position id like it to be.

So basically for now is there a way to make the div .special stay in the same position regardless of scale as I do not want it to cross over or move to far away from the divder div .divide. Eventually id like to do the same to .reason to be positioned on the other side of the .divide div but for now im just wanting to get that .special text to stay in a position that will stay the same on scale changes (sorry the site isnt live so I cant really link much, but a general idea for me to tweak would really help, thanks!)

Here is the html and css relevant to the topic:

<!--===================================================Content===================================================!-->
<div class="contentwrap">
    <div class="textwrap">
        <div class="special">
            <p>Specializations</p>
            <p>With various skills in branding,<br />
             multi-media and advertising I am able to provide<br />
            fresh and inspiring solutions for the task given to me. <br />
             Using various programs such as:</p>
        </div>
    </div><!--close textwrap-->
    <div class="content">
            <div class="divide">
            </div><!--close divide!-->
    </div><!--close content!-->
    <div class="reason">
       <p>Specializations</p>
       <p>With various skills in branding,<br />
       multi-media and advertising I am able to provide<br />
       fresh and idsapiring solutions for the task given to me. <br />
       Using various programs such as:</p>
     </div><!--close reason!-->
</div><!--close contentwrap!-->

CSS

/*---------------------------- Content ----------------------------*/
.contentwrap{   
    position:relative;
    top:500px;
    width:100%;
    z-index:500;
    #171717
}
.content{
    position:relative;
    height:290px;
    min-height:212px;   
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
    margin:0 auto;
}
.textwrap{
    position:absolute;
    width:100%;
    background:#090;
}
.special{
    position:relative;
    text-align:center;
    width:350px;
    left:400px;
    background:#006;
}
.divide{
    position:absolute;
    background:url(../images/divide.png) no-repeat top;
    width:100%;
    height:190px;
    top:40px;
    z-index:1000;
}
.reason{
    position:absolute;
    text-align:center;
    width:350px;
    left:800px;
    background:#006;
}

Answer 1

You are using a lot of position: absolute or position: relative attributes. These are kind of "rational" in positioning your divs. It is much easier to work with margin and padding.

For example, check your code with all css removed: JS FIDDLE DEMO. It works quite well and everything is displayed inside your screen (on every device/size).

If you now want to stylize it, you can use margin to add space around your elements, or padding to stretch them. At first, it seems like they do kind of the same thing, but its important to understand their difference. » Read more about them here.

As its quite hard, to understand your layout or question, I have tried to edit your html so that it stays inside the viewport and creating some example styles, so that you get an idea:

JS FIDDLE DEMO