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} Code (markup): "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.
Absolutely position it relative to the container. position:relative; on .mainwrapper and position:absolute; and top/left properties on .photo.