Question

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 1920×1080 computer. On my 1280×800 computer it looks fine. What else could I do to make my layout more user-friendly across different screen resolutions?

---

1920×1080:
http://a.pictureupload.us/18160038325106dbaecbca8.png

1280×800:
http://a.pictureupload.us/15860427595106dba43723e.png

---

index.html:

<div id="blog">
        <h2>Lorem Ipsum</h2>

</div>
<div id="blog-description">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...</div>
<div class="readmore"> <a href="./blog/" title="Read more...">
    <img src="http://a.pictureupload.us/14850301725106d9f0cc927.jpg" /><div class="readtext">
    <p>Read more...</p></a>

</div>
</div>
<img src="http://a.pictureupload.us/4249066075106d9f3bfe03.jpg" class="blogimg" />

style.css:

 #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;
}

Answer 1

One thing you could do is put everything in a wrapper div and set that to some percentage of the screen width. Not a perfect solution, but it does narrow up the screen space you have to fill – especially useful for low-content pages like your example.

<div id="wrap"> ... </div>

#wrap{
  width:80%;
  display:block;
  margin:auto;
}

OOCSS has some basic layouts and percentage based columns that could also help.