Question

I currently don’t have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can’t show the images because of an NDA. So will describe the best I can.

Basically:

1. I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser.

2. I have a “Arrow” png image with transparent background that needs to be flushed against the right side of the browser.

3. The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.

4. The content of the page will be centered as well. Just in case this info was needed.

Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo.

All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.

I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn’t something that is possible.

Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.

FINAL Update: Using the Advice from Max

Note: I only tested it on chrome, firefox and safari, all recent versions as of this post. Not sure what issues I will run into with other versions or IE.

HTML

 <div class="header-wrapper">

  <div class="header">
   <img src="images/logo.png" />
  </div>
  <div class="arrow-wrapper">
   <div class="arrow-tail"></div>
  </div>
 </div>

CSS Code

.header-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
}

.header {

   position: relative;
    z-index: 10;
    height: 69px;
    margin: 0 auto;
}

.arrow-wrapper {
    z-index: 5;
    background:url(../images/arrow_tip.png) no-repeat top left;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 18px;
    padding: 0 0 0 120px; 
    height:23px;
    margin-left:140px;
}

.arrow-tail{
    background:url(../images/arrow_tail.png) repeat-x top left;
    height:23px;
    width:100%;
}

Answer 1

If I got you right, this could a be a solution:
http://jsfiddle.net/WazcT/3/

HTML:

<div class="main">
  <div class="header"></div>
  <div class="arrow_container">
    <div class="arrow">&larr;&dash;&dash;</div>
  </div>
</div>

CSS:

.main{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.header{
    position: relative;
    opacity: 0.5;
    z-index: 10;
    width : 400px;
    height: 100px;
    margin: 0 auto;
    background: #ccc;
}

.arrow_container {
    z-index: 5;
    background: #88b7d5;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 10px;
    padding: 10px 0 10px 200px;     
}

.arrow{
    padding: 10px;
    background: #eee;
    font-size: 32px;
}
​