Question on positioning

Hi, I wanted to try a liquid layout, although I dont think I am doing things very well. I need to produce a header the same as the following
http://i46.tinypic.com/2lkyauf.jpg

At this moment, I do
<!-- HEADER -->
<div id="header">
<div class="wrapper"> <a href="index.html"><img id="logo" src="images/logo.png" alt="" /></a> </div>

<div class="wrapper"> <img id="logoTwo" src="images/top.png" alt="" /> </div>

<div class="wrapper"><div id="text">TRUSTED BY THE WORLD'S <br> MOST DEMANDING CLIENTS</div></div>
</div>
<!-- ENDS HEADER -->

Where the header id has the background image for the header, and log and logoTwo are the two logos you see in the image (including the you call us section as a logo).

The css is as follows
#header{
height: 100px;
position: relative;
z-index: 10;
background: #2a2d30 url(../images/header.png) top center no-repeat;
background-size:100% 100%;
}
#logo{
position: absolute;
top: 5px;
left: 30px;
}

#logoTwo{
position: absolute;
top: 5px;
left: 620px;
}

#text{
font:Tahoma, Geneva, sans-serif;
color:#FFFFFF;
font-size:18px;
position: absolute;
top:25px;
left:330px;
}

Now, everything seems to be positioned nicely on my computer. I am worried if it will be the same on different resolutions are. When I originally used padding instead, the logo's seemed to move places on different resolutions. The top, left attributes dont appear to make this happen. Whats the difference between to two? Also, is my code ok? Would you do things differently?

Just any advise you can give would be greatly appeciated.

Cheers

Nick

Yes I would do things differently. Don't abuse absolute positioning which is exactly what you are doing. Remove the div with class="wrapper" from your HTML. Let the elements natually flow. Then use this for your CSS
#header{
padding-top:5px;
height: 95px;
position: relative;
background: #2a2d30 url(../images/header.png) top center no-repeat;
background-size:100% 100%;
overflow:hidden;
}
#logo {
float:left;
margin-left:30px;
display:inline;
width: XXpx; /* this should be the width of your #logo image */
}

#logoTwo{
float:right;
width: XXpx; /* this should be the width of your #logoTwo image */
}

#text{
font:Tahoma, Geneva, sans-serif;
color:#FFFFFF;
font-size:18px;

padding-top:25px;
margin-left: XXpx; /* this should be greater than or equal to the width of your #logo image */
margin-right: XXpx; /* this should be greater than or equal to the width of your #logoTwo image */
}

Thank you very much for the advise. I was just wondering what is wrong with using absolute positioning to much? I have tried what you suggested, but the logos dont overlap the header like in the image. I think this is because of the overflow:hidden. Also, the logos are not in the exact position where I need them to be. How would I get them in their correct position without using absolute positioning?

Cheers

Nick

What I gave you should have put logo on the left and logoTwo on the right. When you use absolute positioning in the way you have it may not look the same on all resolutions. Post your updated CSS and HTML. A link to your site would be better.