I have a problem that is related to three divs. I want to do something like on this picture bellow, and I have no idea how to do it, so any help and suggestion would be highly appreciated. Here's the pic: As for the positioning, I'm trying to use position: relative on all divs, because absolute positioning messes up my layout. Basically, Float Right on the picture contains text, and all I want to do is to place it over those two divs. I used the negative margin-top on my Float Right box without any z-index to get it over the upper block element, but I can't get it over the bottom block element. Actually, I did manage to put the Float Right div over the bottom block element by using the negative margin-top on bottom block element, and it managed to do the trick, but then background image from Float Right div dissipated equal to the value of negative margin-top that is mentioned above. I don't know what to do, so I'm hoping that you'll be able to help me out a bit.
Do the boxes have fixed heights? You could have just one box, with a background image that looks like two boxes, and the floated box in the middle of two paragraphs. Only the text in the bottom paragraph wraps around the floated box, which makes it hard to get it right in the middle. Another way is to have two paragraphs inside each box, with one being less than full width. Then you just absolutely position a box over the gap.