title: HTML/CSS: Making my layout more user-friendly with different screen resolutions
body: <p>I've been coding the layout I'm working on right now using only percents (%) and edm. Even though I don't code with pixels, my layout looks messed up on my 1920x1080 computer. On my 1280x800 computer it looks fine. What else could I do to make my layout more user-friendly across different screen resolutions?</p>
  
  <hr>
  
  <p>1920x1080:
  <a href="http://a.pictureupload.us/18160038325106dbaecbca8.png" rel="nofollow">http://a.pictureupload.us/18160038325106dbaecbca8.png</a></p>
  
  <p>1280x800:
  <a href="http://a.pictureupload.us/15860427595106dba43723e.png" rel="nofollow">http://a.pictureupload.us/15860427595106dba43723e.png</a></p>
  
  <hr>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;div id="blog"&gt;
          &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
  
  &lt;/div&gt;
  &lt;div id="blog-description"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tortor
      nec turpis rutrum suscipit eget ut ligula. Curabitur sit amet velit odio,
      id commodo nisl. Morbi non metus risus. Pellentesque vulputate, nisi id
      interdum imperdiet, lectus erat scelerisque risus, sed viverra mi lorem
      a neque. Sed et erat tristique arcu laoreet eleifend. Fusce libero ipsum,
      rhoncus at porta eu, consectetur quis...&lt;/div&gt;
  &lt;div class="readmore"&gt; &lt;a href="./blog/" title="Read more..."&gt;
      &lt;img src="http://a.pictureupload.us/14850301725106d9f0cc927.jpg" /&gt;&lt;div class="readtext"&gt;
      &lt;p&gt;Read more...&lt;/p&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;img src="http://a.pictureupload.us/4249066075106d9f3bfe03.jpg" class="blogimg" /&gt;
  </code></pre>
  
  <p><strong>style.css:</strong></p>
  
  <pre><code> #blog {
      position: relative;
      left: 15%;
      top: 8.000em;
      width: 15.000em;
  }
  #blog-description {
      position: relative;
      top: 8.300em;
      width: 25.000em;
      left: 16%;
      font-family: District Pro Thin;
      font-size: 1.100em;
  }
  .blogimg {
      position: relative;
      float: right;
      top: -15px;
      right: 16%;
      width: auto;
      height: auto;
      border: #000 thin solid;
      -moz-box-shadow: 0em 0em 0.375em #000;
      -webkit-box-shadow: 0em 0em 0.375em #000;
      box-shadow: 0em 0em 0.375em #000;
      /* For IE 8 */
      -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
      /* For IE 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
  }
  .readmore {
      position: relative;
      float: left;
      top: 140px;
      left: 44.5%;
      width: auto;
      height: auto;
  }
  .readmore .readtext a {
      font-size: 14px;
      font-family: District Pro Thin;
      text-decoration: none;
      color: #000;
      position:absolute;
      top:10px;
      /* in conjunction with left property, decides the text position */
      left:10px;
  }
  </code></pre>