css header issue

I have a problem with my header. The header has a background image, and two logos which should overflow. I am attempting to use the 1140 grid system. So the html is
<div class="container">
<div class="row">
<div class="twelvecol last" id="imgHolder">
<img id="logo" src="images/logo.jpg" />
<img id="top" src="images/top.png" />
</div>
</div>
</div>

And the css is
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
}
.row .twelvecol {
width: 100%;
float: left;
}

#topImg {
width: 100%;
}

#footerImg {
width: 100%;
}
#imgHolder{
background:#efefef url(../images/header.jpg) no-repeat;
background-size:100% 100%;
}
#logo{
float:left;
}

#top{
float:right;
}

classes container and row are from the grid template. I have a couple of problems. Firstly, the two logos dont overflow. I have tried setting the overflow property without no success. My second issue relates to the positioning of the logos. float left and right partly do the job, but now I need to get them in more precise positions. I cant use absolute, as this will mess things up when the browser is resized. So what is the best thing to do to precisely position my images whilst allowing for the adaptive layout?

cheers

Nick

Can we have a link to your page? And where do you need to position those images?

Hi, I have uploaded the site to http://www.animatemycard.com/sky/index.html

I have only started so it is very basic. As you can see, there is the skyclub logo on the left hand side, and the you call us tab on the right hand side. Both of them logos should overlap onto the black area. They should also be positioned either side of the text in the middle. I remember before that you told me that absolute positioning removes from the flow of the page, so I was wondering how else I could get the images positioned there? If I use padding or something, will this work when resized in the browser?

thanks

Nick

First you want to add position:relative; to #imgHolder
#imgHolder{
background:#efefef url(../images/header.jpg) no-repeat;
background-size:100% 100%;
position:relative;
}

Then to #logo add position:absolute;, left:Xpx;
#logo{
postion:absolute;
left:100px;
}

And the same to #top but with left:Xpx;
#top{
postion:absolute;
right:100px;
}

Then just adjust the left and right properties until the images are in the right position.

Just a word of warning. As the window re-sizes the position of the images will be relative to the width of #imgHolder. It will cause the images to overlap and cover the text in the middle.