3 Part Image Header in CSS

I have a 3 part header, the first part is the logo that incorporates the left hand side of the header. The middle part which is a 1 px repeating slice of the image and the right part which is 3px wide border of the image. I can get the first two to line up properly but I cannot figure out for the life of me figure out how to align the right hand side with the left and middle.


This is the right hand image:
images/header/header_right.gif

index:

<div class="container">

<div id="header"><a href="index.html"><img src="images/header/logo.gif" /></a> </div>
</div>

css:
#header {background-image:url(images/header/header_fill.gif); background-repeat:repeat-x; width:952px; }

img{ border-style:none;}

Where is #header_left in your HTML? We'll need a link to your page or your full code (HTML and CSS) in [CODE][/CODE] (not [iCODE]) tags in order to assist.

I have edited the original post and the files are locally hosted so no direct link possible.

Posting all your code is still your best guarantee of a satisfactory response, regardless of whether or not the site is local.

Try making your <a> a container for the right cap:

#header {
background:url(mages/header/header_fill.gif) repeat-x;
width:952px;
}

#header a {
display:block;
width:952px;
background:url(images/header/header_right.gif) right no-repeat;
}

img {
border-style:none;
}


Is that what you're after?

Hello alexenk,
It's pretty hard to work on an image related question when we don't get the images.
The code you posted is only loading 2 images.

If you don't have hosting to set up a test site, zip up the files (#header CSS, HTML and the images and upload it to rapidshare so we can download it and have something to work with.

msuffern you have fixed it! I reset some manual widths and applied your #header a trick and all is sorted. Thank you!