Images dont work with css - css

Question

Sorry if this is a stupid question, but for some reason after 5 hours of work I'm stuck with nothing working...
I have a header which has a logo and the telephone (both of which are images). I want the telephone to be at the middle right of header and then move to the left as the user resizes the window. But when I tried, it moves down. I'd like the logo to be positioned on top of ΛΟΓΙΣΜΙΚΟ and move with the menu (staying on top) as the user resizes.
Here is the site: http://www.altasoft.gr/index_.htm
Can this be done with JavaScript?
<div class="header">
<div style="position:relative; left:17%; top:10px; z-index:99;">
<img src="images/Altasoft_Logo.png" alt="" width="354" height="91" />
</div>
<div style="position:relative; left:80%; top:-30px; z-index:5;">
<img src="images/telephone.gif" alt="" width="142" height="16" />
</div>
</div>

Answer 1

.header {
margin: 0 auto;
padding: 0;
position: relative;
text-align: left;
width: 931px; /* make this same width than 'main content'*/
z-index: 10;
}
in your first divider, style it this way :
element.style {
/* left: 17%; */ /* remove the left:17% */
position: relative;
top: 10px;
width: 50%;
z-index: 99;
}
It will align your header and menu