CSS Positioning Puzzle

Answer 1

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 2

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 3

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 4

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.

Answer 5

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 :)