Question

I need to write a page that has a full-width arrow on the bottom of the page. Thus, I use the following HTML:

<div id="footer_wrap">
    <div id="footer_left"></div>
    <div id="footer_right"></div>
</div>

the relevant CSS being:

#footer_wrap{
width: 100%;
}

#footer_left{
background: url('../img/arrow_bg1.png') repeat-x;
width: 100%;
height: 183px;
position: absolute;
left: 0;
}

#footer_right{
display: inline-block;
background: url('../img/arrow_bg2.png') no-repeat;
width: 250px;
height: 183px;
position: absolute;
right: 0;
}

In theory, this should work – and indeed, it did, when I used images with fixed background colors. However, my client required them to be transparent, which unfortunately revealed the ugly truth behind my hack – the arrow’s “shaft” peeks out of the arrow head. What can I do about it?

The images comprising the arrow are a 1x183px “shaft” texture that is repeated for the entire length of the arrow (or, in this case, the entire page [width: 100%]), and the arrowhead is a 250x183px rectangle.

The arrow needs to take up the entire page and it needs to use transparent images, so these solutions are out of the window immediately. I suppose something like width: 100%-250px would be acceptable, but these shenanigans aren’t supported in CSS.

Answer 1

You’re already using position:absolute; so instead of width:100%, you can set left and right:

#footer_left{
position: absolute;
left: 0;
right:250px;
/* etc */
}

There are many other workarounds, but for your specific case i think it’s the easiest.