title: Creating resizable website with lack of CSS skills - CSS shapes
body: <p>This is my first question here, so please point out any of mistakes that I made. <br/><br/>
  I was obliged to create a web page that looks like a flag of a team. I've managed to do such, but only with fixed size of elements :<img src="https://i.stack.imgur.com/yFpme.jpg" alt="enter image description here"> <br/><br/>
  On other resolutions it just doesn't fit the screen.<br/>
  Code:<br/><br/> html<br/></p>
  
  <pre><code>&lt;div id="centered"&gt;
      &lt;div id="triangle-down"&gt;&lt;/div&gt;
      &lt;div id="triangle-right"&gt;&lt;/div&gt;
      &lt;div id="triangle-left"&gt;&lt;/div&gt;
      &lt;div id="triangle-up"&gt;&lt;/div&gt;
      &lt;div id="diamond-narrow"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css<br/></p>
  
  <pre><code>    #centered {
          position:relative; clear:left;
          height:766px; width:1245;
          margin:0 auto;
          background:#fff;
          z-index: 0;
      }
  
      #triangle-up {
          position: absolute;
          margin-left: 281px;
          margin-top: 555px;
          width: 0;
          height: 0;
          border-left: 341px solid transparent;
          border-right: 341px solid transparent;
          border-bottom: 211px solid #3b5998;
          z-index: 1;
      }
  
      #triangle-down {
          position: absolute;
          margin-left: 281px;
          width: 0;
          height: 0;
          border-left: 341px solid transparent;
          border-right: 341px solid transparent;
          border-top: 211px solid #3b5998;
          z-index: 1;
      }
  
      #triangle-left {
          position: absolute;
          margin-left: 902px;
          margin-top: 171px;
          width: 0;
          height: 0;
          border-top: 211px solid transparent;
          border-right: 343px solid #3b5998;
          border-bottom: 211px solid transparent;
          z-index: 1;
      }
  
      #triangle-right {
          position: absolute;
          margin-top: 171px;
          width: 0;
          height: 0;
          border-top: 211px solid transparent;
          border-left: 343px solid #3b5998;
          border-bottom: 211px solid transparent;
          z-index: 1;
      }
  
      #diamond-narrow {
          margin-left: 342px;
          width: 0;
          height: 0;
          border: 280px solid transparent;
          border-bottom: 173px solid red;
          position: absolute;
          top: -70px;
  }
  
      #diamond-narrow:after {
          content: '';
          position: absolute;
          left: -280px; top: 173px;
          width: 0;
          height: 0;
          border: 280px solid transparent;
          border-top: 173px solid red;
      }
  </code></pre>
  
  <p>Here's a jsfiddle of my flag: <a href="http://jsfiddle.net/XDLYF/1/" rel="nofollow noreferrer">click</a> <br/>
  As you can see I am using css shapes to draw triangles and a diamond. My questions are:<br/>
  How can I make that flag (web page) to fit different screen resolutions? How to present width and height of my shapes in percentages?<br/>
  As I have read <a href="https://stackoverflow.com/questions/13474754/how-to-set-borders-thickness-in-percentages">here</a>, eg. border-left can not have a value in %.</p>
  
  <p><br/>
  <strong>EDIT</strong>
  <br/>
  Thanks to @joe_coolish, I managed to make that web page resizable. However, I got one more problem.<br/>
  Here's my html:</p>
  
  <pre><code>&lt;table width="100%" style="height: 100%;"&gt;
      &lt;tr&gt;
          &lt;td width="10%" height="10%"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td width="10%" height="10%"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="10%" height="10%"&gt;&lt;/td&gt;
          &lt;td id="centered" bgcolor="white"&gt;
              &lt;div id="main"/&gt;
          &lt;/td&gt;
          &lt;td width="10%" height="10%"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="10%" height="10%"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td width="10%" height="10%"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Changes to Joe's code:</p>
  
  <pre><code>var main = $('#main');
  
  function update() {
  
  var height = $('#centered').height();
  var width = $('#centered').width();
  
  ...
  
  $('#centered').resize(function () {
  update();
  });
  </code></pre>
  
  <p>Now when I load my page, this happens: <img src="https://i.stack.imgur.com/rcrfV.png" alt="before inspecting"><br/>
  I have to inspect some element to work it properly. Why?</p>