title: Pixel Border and Percentage width in Proportion
body: <p>I think I might already know the answer to this one but I need a sanity check!</p>
  
  <p>Say I have </p>
  
  <pre><code>#gridtest{
  width:590px;
  }
  </code></pre>
  
  <p>I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:</p>
  
  <pre><code>#gridtestpercent{
  width:59%; /*590/1000*/
  }
  </code></pre>
  
  <p>If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do </p>
  
  <pre><code>#gridtest{
  width:570px;
  border:10px solid red;
  }
  </code></pre>
  
  <p>I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.</p>
  
  <pre><code>#gridtestpercentnoborder{
  width:57%; /*570/1000*/
  border:10px solid red;
  }
  </code></pre>
  
  <p>I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet. </p>
  
  <p>If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?</p>
  
  <p>Cheers!</p>