title: Decoration outside the main div is unstable using CSS...?
body: <p>I'm trying to make some decoration outside the main content div,
  that would be getting hidden if the window size is small.</p>
  
  <p>I thought for a while and came up with the following markup, (you can copy paste and see it),
  and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.</p>
  
  <p>Here's the code: </p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              body {
                  padding: 0px;
                  margin: 0px;
                  width: 100%;
                  height: 100%;
                  background-color: yellow;
              }
              div.content {
                  display: block;
                  width: 958px;
                  height: 400px;
                  background-color: #CCC;
                  margin: 0px auto;
              }
              div.wrap {
                  margin: 0px auto;
                  min-width: 958px;
                  max-width: 1058px;
                  overflow: hidden;
                  position: relative;
                  background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
                  background-position: center;
              }
              div.left, div.right {
                  background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
                  width: 50px;
                  display: block;
                  height: 50px;
                  bottom: 0px;
                  position: absolute;
              }
              div.left {
                  right: 479px;
                  margin-right: 50%;
              }
              div.right {
                  left: 479px;
                  margin-left: 50%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrap"&gt;
              &lt;div class="left"&gt;&lt;/div&gt;
              &lt;div class="right"&gt;&lt;/div&gt;
              &lt;div class="content"&gt;
                  &lt;-- Content
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is what happens in Google Chrome on resize:</p>
  
  <p><img src="https://i.stack.imgur.com/NDT4V.png" alt="This is what happens in Google Chrome on resize"></p>