html - 更改空间时放置容器，使其不移动

我试着把一个容器放在一个特定的地方-我怎么能做到这一点，并使它保持在它的比例位置，即使我放大或缩小屏幕？
HTML格式：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="huvud">

</div>

<div id="nav-yttre">
    <div id="nav-mitten">
        <ul id="nav-inre">
            <li><a href="index.html">HEM</a></li>
            <li><a href="om_oss.html">OM OSS</a></li>
            <li><a href="blogg.html">BLOGG</a></li>
            <li><a href="marken.html">M&Auml;RKEN</a></li>
            <li><a href="hitta_hit.html">HITTA HIT</a></li>
        </ul>
    </div>
</div>

<div id="main">

    <p>Hem</p>

</div>

<div id="right">
    <p>This container</p>
</div>

<div id="fot">
    <div id="adress">
        <p id="rub">BES&Ouml;KSADRESS</p>
        <p>V&auml;gen 1, 12345 Stockholm</p>
    </div>

    <div id="kontakt">
        <p id="rub">KONTAKTA OSS</p>
        <p>Telefon: 08-123 45 67</p>
        <p>Mail: [email protected]</p>
    </div>

    <div id="tider">
        <p id="rub">&Ouml;PPETTIDER</p>
        <p>Vardagar: 10-19<br>L&ouml;rdag: 10-17<br>S&ouml;ndag: 11-16</p>
    </div>

    <div id="design">
        <p>Webbplatsen &auml;r gjord av MD</a></p>
    </div>

</div>


</body>

CSS:

/* Header */

#huvud{
width: 1000px;
margin: 0 auto;
}

#header{
display: block;
}

/* Meny */

#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}

#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}

#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', cursive;
font-size: 25px;
}

#nav-inre li{
display: table-cell;
}

#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}

#nav-inre li #here{
color: #221f20;
}

#nav-inre li a:hover{
color: #221f20;
}

/* Main */

#main{
width: 1000px;
margin: 0 auto;
min-height: 500px;
}

#fadein {
margin: 10px auto;
position:relative;
width:281px;
height:500px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#fadein img {
position:absolute;
}

/* Right */

#right{
position: absolute;
left: 1450px;
top: 200px;
background-color: #221f20;
height: 300px;
width: 200px;
}

#right p{
color: white;
}

/* Fot */

#fot{
width: 1000px;
margin: 0 auto;
border-top: solid #221f20 1px;
text-align: center;
clear: both;
}

#adress{
width: 334px;
float: left;
}

#kontakt{
width: 333px;
float: left;
}

#tider{
width: 333px;
float: right;
}

#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url(rusty-bar-small.jpg);
}

#design p{
color: #eeeeee;
font-weight: bold;
}

#design a{
color: #eeeeee;
}

#design a:hover{
color: #221f20;
}

#rub{
font-weight: bold;
}

/* Allmänt */

p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}

小提琴：http://jsfiddle.net/nvsodsfs/1/
结果：http://jsfiddle.net/nvsodsfs/1/embedded/result/

最佳答案

你有一个中心和1000px宽的div：#huvud。
将div放入#huvud：

<div id="huvud">
    <div id="right">
        <p>This container</p>
    </div>
</div>

使#huvuddisplay: relative使绝对子位置相对于它自己的位置。现在看起来是这样的：

#huvud {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

设置#rightleft: 100%以便将其强制放到新父级之外，然后根据需要给它一个左边距：

#right {
    position: absolute;
    left: 100%;
    top: 200px;
    background-color: #221f20;
    height: 300px;
    width: 200px;
    color: #FFF;
    margin-left: 100px; /*need more?*/
}

完整示例
为了简单起见，所有其他内容都被删除了。
使示例全屏显示，并在放大/缩小时看到它保持不变

/* Header */

#huvud {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
/* Right */

#right {
  position: absolute;
  left: 100%;
  top: 200px;
  background-color: #221f20;
  height: 300px;
  width: 200px;
  color: #FFF;
  margin-left: 100px;
}

Other content removed for simplicity - the div is this way >>>>>>

<div id="huvud">
  <div id="right">
    <p>This container</p>
  </div>
</div>