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

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 🙂