[Solved] Position image outside of div in fluid layout

So, I'm new at CSS and not kind of understand what's going on with it, but I'm trying to do something that I haven't found any help for online (after hours of Googling). I have a basic 2 column fluid layout (http://andrewheiss.110mb.com/index.html; http://andrewheiss.110mb.com/css.css) (I would post the code, but there are some pictures, so I'll just post the links, unless you want the code here too - plus the code is a mess... first time...).

I'm trying to hang the logo slightly outside the header div, so the transparent parts hang out over the background. I also want the top margin of the header to be at the same level of the line in the transparent png (see the image to see what I mean).

Anyway, I got it to work using floats and negative positioning, as you can see, but it's a nightmare to work with now. The divs are way too overlapped and every time I try adding something to the divs or adding footer div, I have to reposition everything. The only advantage is the fluidity. I tried absolute positioning, but that was a mess too.

What is the best practice for getting an image to hang outside of a div while keeping a fluid layout and easy-to-work-with divs?

Thanks!