How to create a div that doesn't effect the rest of the layout?

[JMusic]

I am creating a new design for my blog right now and I'm having a MAJOR brain fart. I can't remember how to make a "div" that doesn't affect the rest of the layout (ie by moving things down). Here is the code I'm using:

.mainwrapper {width: 780px}
.fleft {float: left; width: 220px}
.photo {width:250px; height: 250px; position: relative; top: -33px; left: -26px}
.fright {float: right; width: 560px}

"fleft" and "flright" are the two main columns of the layout. I've put "photo" in "fleft", but I want the edges of the photo to "bleed" outside of the top & left edges, and I don't want it to affect the placement of anything around it -- I want it to overlap the text in "fleft" and "fright".

What's happening is, is that both of the columns are moving down 250px because of the width & height of the "photo" div, and I can't remember how to keep that from happening. I know it should be something pretty simple but I haven't done a layout with an element like this in a while so I can't remember what the correct way to accomplish this is.

[Setek]

Do you just mean to absolutely position it?

To take it out of the document flow, it is like a layer on top of everything else, so will overlap them.