Hi,
Here’s a rough example of how I would go about this.
It uses the display table properties (ie8+) to construct the blocks as required as in essence you seem to be replicating a table structure of sorts. The layout is much the same as would have been had a table been used but of course only normal html and css is used so is semantically correct.
Note that you shouldn’t just place large images in the foreground and then try to put text on top of them but instead use background images when the image is decoration only. For coloured backgrounds though just use css and then place the smaller icon images as required in the flow of the document.
Keeping the flow of the document is the most important thing and one element follows the next logically and simply. No absolute positioning needed and no z-index needed.
Here is the full template for the above.
<!DOCTYPE HTML>
<html>
<head>
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Title here</title>
<!-- must have viewport meta tag for mobile support - only add this tag if you are using media queries to support mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- the next script is the html5shiv for the new html5 elements to be recognised in IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- for media query support in IE8 download a script from here : https://code.google.com/p/css3-mediaqueries-js/ -->
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<!-- special stylesheet for ie7 and under if required -->
<!--[if lt IE 8]>
<link href="iecss.css" rel="stylesheet" media="screen, projection" type="text/css">
<![endif]-->
<style>
html, body {margin:0;padding:0}
h1, h2, h3, h4, h5, h6, p {margin:0 0 1em}
#outer {
max-width:960px;
margin:auto;
}
h1.logo {margin:0 0 10px;}
h1.logo img {
display:inline-block;
margin:0 20px 0 0;
vertical-align:middle;
}
.table {
display:table;
width:100%;
border-collapse:collapse;
}
.main {clear:both}
.tc {
display:table-cell;
vertical-align:top;
}
.sidebar {
background:#f39c12;
width:230px;
}
.sidebar-top{
background:red;
color:#fff;
border-bottom:10px solid #fff;
padding:10px 0 20px;
text-align:center;
margin:0;
}
.sidebar p{padding:5px;}
.content-inner {text-align:center}
.content-inner .tc {
border-left:10px solid #fff;
border-bottom:10px solid #fff;
}
.content-inner .lastrow .tc {border-bottom:none}
.cell1 {background:#27ae60;}
.cell2 {background:#9b59b6;}
.cell3 {background:#3498db;}
p.img-holder {
padding:10px 0;
margin:0;
}
.content-inner h3 {
margin:0;
color:#fff;
}
.content-inner p {
margin:0 auto 1em;
color:#fff;
width:80%;
}
@media screen and (max-width:700px) {
.table, .tr, .tc, .content-inner .tc {
display:block;
width:auto;
margin:10px 0;
border:none
}
.sidebar {
width:auto;
margin:0 5px
}
h1.logo {margin:0 10px 10px 5px}
}
@media screen and (max-width:500px) {
h1.logo {
display:block;
margin:10px auto;
text-align:center;
}
h1.logo img {
display:block;
margin:0 auto 10px;
}
}
</style>
</head>
<body>
<div id="outer">
<h1 class="logo"><img alt="Heading title" height="137" src="http://placehold.it/139x137" width="139"/> <span>Your Heading Goes Here</span> </h1>
<div class="main table">
<div class="sidebar tc">
<h2 class="sidebar-top">Sidebar Heading</h2>
<p>Light years, gathered by gravity, dream of the mind's eye white dwarf? Galaxies, trillion! Tunguska event culture, the carbon in our apple pies billions upon billions realm of the galaxies rogue stirred by starlight something incredible is waiting to be known are creatures of the cosmos citizens of distant epochs vastness is bearable only through love, extraordinary claims require extraordinary evidence? Euclid.</p>
</div>
<!-- end sidebar -->
<div class="content tc">
<div class="content-inner table">
<div class="tr">
<div class="cell1 tc">
<p class="img-holder"><img alt="Find us" width="112" height="112" src="http://placehold.it/112x112" /></p>
<h3>Find Us</h3>
<p>Vanquish the impossible tesseract, corpus callosum,</p>
</div>
<div class="cell2 tc">
<p class="img-holder"><img alt="Find us" width="112" height="112" src="http://placehold.it/112x112" /></p>
<h3>Find Us</h3>
<p>Vanquish the impossible tesseract, corpus callosum,</p>
</div>
<div class="cell3 tc">
<p class="img-holder"><img alt="Find us" width="112" height="112" src="http://placehold.it/112x112" /></p>
<h3>Find Us</h3>
<p>Vanquish the impossible tesseract, corpus callosum,</p>
</div>
</div>
<!-- end tr -->
<div class="tr lastrow">
<div class="cell1 tc">
<p class="img-holder"><img alt="Find us" width="112" height="112" src="http://placehold.it/112x112" /></p>
<h3>Find Us</h3>
<p>Vanquish the impossible tesseract, corpus callosum,</p>
</div>
<div class="cell2 tc">
<p class="img-holder"><img alt="Find us" width="112" height="112" src="http://placehold.it/112x112" /></p>
<h3>Find Us</h3>
<p>Vanquish the impossible tesseract, corpus callosum,</p>
</div>
<div class="cell3 tc">
<p class="img-holder"><img alt="Find us" width="112" height="112" src="http://placehold.it/112x112" /></p>
<h3>Find Us</h3>
<p>Vanquish the impossible tesseract, corpus callosum,</p>
</div>
</div>
<!-- end tr -->
</div>
<!-- end table -->
</div>
</div>
</div>
</body>
</html>
For older browsers support you would need to use floats instead of the display:table-properties but most people have dropped support for ie7 and under now anyway.
Notice the use of media queries to cater for smaller browser widths (just open and close the browsers window).
Hope it helps but shout if you need clarification.
