How can I have this overlapping image with divs?

HTML & CSS
1

I am working on a client’s website and am wondering how can I do this: http://imageshack.us/photo/my-images/818/exampleb.jpg/, in css. Thanks in advance.

2

If it weren’t for that darn Internet Explorer 6 and 7, you could just have a float hanging out.

However if Haslayout is tripped in any little way on the grey box, you’re stuck.

So more likely you’ll have to rel-po the grey box and abso-po the blue one. Or possibly you could get away with just rel-po-ing the blue box. The idea is, the grey box would need to have a set (limited) height and overflow: hidden. Positioning the blue box lets you give it a z-index and that may let you overcome the overflow: hidden (now I’m not sure, I haven’t done that in a long time… if plain z-index can’t work then blue box will have to be abso-po’d which will take it completely out of the document flow and the parent’s overflow settings definitely can’t stop it).

Or, I am assuming the grey box is a real box. if it’s not, but just a fixed-height background image, then do that. The box containing the blue box doesn’t have to have a background colour. It can be transparent and still hold the grey background image.

If you’d like to see code examples of what I mean, let me know.

3

Actually, unless I misinterpreted the example, this is pretty easy to pull off–even with support for IE 6/7.

All you need to do is float the image to the right, give it a right margin so you have that sexy gutter, and then a negative top margin of just a little bit less than the full height of the dark box. BEHOLD.

This technique is, of course, useless if the dark box’s height is determined dynamically (by text, for example).

4

Thank you sdleihssirhc for your code, but I would like to see how Stomme’s code work as well. Can I please see some code examples Stomme poes?

5

That’s probably what I’d do anyway, and work out some kind of solution for teh dead browsers (if I could be bothered) later.

So here’s what I’d try first:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
body { margin:0; }
div { background-color:#404040; min-height:175px; padding: 10px; margin-top: 50px; }
img { float:right; margin-right:10px;  }
</style>

</head>

<body>
	<div><img src="http://placehold.it/300x400"></div>
	
</body>

</html>

Didn’t bother with the bg image, as that’s just an image repeated on the body element.

6

Thanks everyone for your help, I have solved the problem now.

7

Just out of interest, how did you do it?