Untitled

How do I ensure that all the images are aligned correctly in differing browser windows/resolutions?
<!doctype html>

<html>
<head>
    <meta charset="UTF-8"/>
    <title> Foodstant Delivery </title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<figure>
<img id="del" src="images/delivery12.png" alt="Delivery" />
<img id="foo" src="images/foostant2.png" alt="Foodstant" />
<img id="chi" src="images/logochick.png" alt="Chick" />
</figure>

<nav id="hnavbar">
    <ul id="hli">
        <li><a id="home" href="index.html">Home</a></li>
        <li><a id="menu" href="menu.html">Menu</a></li>
        <li><a id="cu"   href="ContactUs.html">Contact Us</a></li>
        <li><a id="au"   href="aboutus.html">About Us</a></li>
        <li><a id="tc"   href="TC.html">Terms & Conditions</a></li>
        <li><a id="job"  href="jobs.html" target="_blank">Jobs</a></li>
        <li><a id="yo"   href="order.html">Your Order</a></li>
    </ul>
</nav>

</body>

/* Foodstant Delivery */

* {
margin: 0;
padding:0;
  }
 body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
background:url("images/bg.jpg");
   }
   /* home page */
  #hnavbar{
font-size:2em;
margin-top:-13em;
}
  #hnavbar ul li {
    list-style-type:none;
    width:325px;
    display:inline;
    padding:0 13px 0 13px;
    }
  #chi {
position:relative;
top:-30em;
left:10em;
       }
  #foo {
position:relative;
top:1em;
left:-11em;
   }
  #del {
position:relative;
top:10.5em;
left:26em;
}
 /* home page */

#hnavbar { position: relative; } //all "absolute" children will be relative to this hnavbar
#home, #menu, ... { position: absolute; }