Okay, so i got the div lays to position correctly.... but when i open the "favorites folder" or "search" button on IE, the layer with the text moves... also for some reason, my friends using the same browser as me see the div laywith the text in a different position, its out of place.

When specifying the widths for your DIV layers, are you using percentage widths, or pixel value widths?

If you are using percentage widths, then they will move to fit (to the specified percentage) in the browser space available.

I always advise to use percentages, since this allows for "liquid layouts", which basically means that they will adjust to fit many different monitor sizes and resolutions :)

how would i convert <div id="Layer1" style="position:absolute; width:382px; height:296px;
z-index:2; left: 250px; top: 420px; font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 11px; color: #000000; overflow:
scroll;"></div> to percentage?

oh nevermind i think i got it! how does this look? http://www.myspace.com/thekisforkooking

<div id="Layer1" style="position:absolute; width:40%; height:25%;
z-index:2; left: 250px; top: 420px; font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 11px; color: #000000; overflow:
scroll;"></div>

Just play around with the percentages until you get them right. I'm not sure why the layers were moving around, even though you were using pixel values. Hmm.

It still doesnt work :(

Your problem is a pretty basic one. As Chris mentioned, your "Layer1" div is positioned absolutely with a pixel value:
<div id="Layer1" style="position:absolute; width:40%; height:25%;
z-index:2; left: 250px; top: 420px; font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 11px; color: #000000; overflow:
scroll;">
Because of this, it will always be 250px from the left of the screen, even though most of the content around it is centered and will change its distance from the sides to maintain its alignment. This changing/non-changing situation is resulting in the positioning error you are seeing. The solution: center the element along with the content. This is sort of the direction Chris was taking suggesting percentages. And he's right: percentages are what we need because their actual values change based on the size of the window, just like the stuff you already have centered. We want one specific percentage, though, 50% for the purpose of centering it in the middle: halfway.
<div id="Layer1" style="position:absolute; width:40%; height:25%;
z-index:2; left: 50%; top: 420px; font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 11px; color: #000000; overflow:
scroll;">

Hmmm... that's still not quite right, though. Your div is now in the middle, but its left edge is what's in the middle while the rest of it hangs out awkwardly to the right. Obviously, we need to make it move a little bit to the left, but if we change our percentage value from 50%, that will ruin our centering efforts. This is where margins come in. Specifically, negative margins. Let's try setting a left margin of -135 pixels to pull that div over to the left a little bit:
<div id="Layer1" style="position:absolute; width:40%; height:25%;
z-index:2; left: 50%; top: 420px; margin-left:-135px; font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 11px; color: #000000; overflow:
scroll;">

Hey, that didn't work too badly... ;)
Honestly, the best way to do it would have been to include your div along with your main content to begin with, using your header image as an actual background, instead of trying to position it over the image to give the illusion of a background. That way, it would have been centered along with your content from the get-go. The above was the easiest way to fix it, though, without rewriting your entire layout.