How do I ensure that all the images are aligned correctly in differing browser windows/resolutions?

Firstly, there are 3 separate images. A chick, the word 'delivery' and 'foodstant' I wanted to align them in such a way--> 3 images Are there any methods to achieve such positioning which enables an unchanged position despite the resizing of the browser window and perhaps resolution ?

Both Absolute and relative positioning works, but resizing the browser screws up everything. Margins can't seem to do the trick.. Or I am just less-skilled.

HTML code as follows:

<!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>

CSS code as follows

/* 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 */

Many thanks in advance.

Solution

Specify the values for top and left in percents as opposed to 'em'. These percentages would be relative to the parent element containing these image. OR simply use one single image instead of 3 and use a image map. Here s a coupla online tools to do this:

http://www.mobilefish.com/services/image_map/image_map.php
http://www.image-maps.com/