CSS Positioning Puzzle - html

Question

The image below represents a website layout I am trying to create. The blue section (bottom right) represents an image should be behind the three neighboring elements and overflow them slightly.
I do not know the best way to do this, at the minute I have a wrapper div round the colored sections and put a background image in there but I am not sure if this is the best approach as the wrapper div needs to have a fixed size.
Any suggestions would be very welcome.
http://www.gumpshen.com/images/layout.png

Answer 1

If I understand you correctly this is my answer:
If the grey is a header, just treat it how you wish.
Then have a "content" div that wraps yellow, red, green and blue, which should be relatively positioned. From there you can absolutely position the blue so that it overlaps yellow, red and green. Then with some z-indexing you should have what you need.

Answer 2

this should be what you need...
Your CSS should look something like this:
<!-- add CSS Reset before this -->
#header {
background-color:#888;
height:100px;
}
#content {
position:relative;
float:left;
}
#topleft {
position:relative;
float:left;
width:50%;
background-color:yellow;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#topright {
position:relative;
float:left;
width:50%;
background-color:red;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#bottomleft {
position:relative;
float:left;
width:50%;
background-color:green;
z-index:3;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
min-height:100px;
}
#bottomright {
position:absolute;
left:49%;
bottom:0;
width:50%;
padding:20px 0 0 17px;
background-color:blue;
z-index:2;
min-height:100px;
}
Your HTML should look something like this:
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="topleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="topright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="bottomleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="bottomright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
note: "lorem ipsum", opacity and min-height added just for show :)

Answer 3

Is it fixed width? If so, you can do some cheats with background images. If it's fixed with and fixed height, then even better - just save the whole image as a background.
You could also give your image a background image, like so:
#MyImage {
padding: 20px 0 0 20px;
background: url(images/image-background.jpg) top left no-repeat;
}
The image will then sit in the middle, with the background showing around the edge. Then your image can be, say, 200x100px, with your background image being 220x120px.

Answer 4

I will assume that you have the colored blocks figured out already.
Now you can put the original image in the blue box as a background, positioned at the right bottom and position a semi-transparent version of that image (or use css transparency) absolutely at the right bottom of your wrapper. The semi-transparent image on top of the original won´t show, it will just show in the surrounding boxes.

Answer 5

Use relative positioning to position the elements and don't forget to set the right Z-Index values to the div you want to put on top.