Absolute div inside a relevant div

Table guy finally switching to CSS here...(bear with me)
I am trying to do a simple overlay of an image on top of my main table that is also contained in a div. I pretty much have it but as you can see here http://hototctoday.com/ that to prevent the arrow from moving around if the user resized their browser, i made the div for the arrow image 800 px wide, which keeps it from moving but now its adding a scroll bar to the right of the browser to account for the 800px wide div. If I make the arrow div 100px wide, it'll look fine at full screen but if you resize the browser it moves over to the left to about the middle of the table

The main table is in a div like this <div position: relevant;left:50%;width:800px; > and inside that is the arrow div that is ..
.arrow {
position: absolute;
left:51%;
top:175px;
width:800px;
height:100px;
overflow: hidden;
}

Thanks for any help, I'm finally seeing the light on CSS superiority, lol...about 10 years late

 

There're some mistakes for your code.

<div position: relevant;left:50%;width:800px; >

{position: relative} not relevant. CSS should be in the style attribute of HTML tags, e.g. <div style="position:relative;left:50%;width:800px;">
</div>

The horizontal scroller may be caused by {left:50%}. It's too large

 

thanks for the advice, had it pretty messed up
is there a better way to center the main div? I was gathering the whole left:50% was the way you do it?

 

yes there is, you can simply add margin:0 auto to the container div and it will get centered.

Cheers

 

ahh.. thanks! so basically the problem I'm having, and I'm sure I'm doing it completely wrong but, check out http://hototctoday.com/ and all I want to do is place that green arrow on top of the main table, but I'm not sure the best way to do this, any help? I REALLY appreciate you guys' help!!