CSS Positioning Help - Image Overlapping DIVS on either side

Vote count:

0

I'm really stuck on this and would appreciate any direction.

I need to code the following design using CMS and html but I have no idea how to get the center image to overlap the divs on the right and left of the image. I have been reading about relative position and z-indexes but everything that I have tried has failed. Generally when I line up three dives across I will use the float property and it works perfectly but it turns out z-indexes can only be used with positioned elements. If someone could get me started in the right direction I will probably be able to figure it out.

See the design I am trying to code here: http://ift.tt/1AzFAiW

This is the base framework but I don't know where to go from here...

<div class="row-container">
  <div class="box1"></div>
  <div class="image"></div> -- Should I use a div for the image? 
  <div class="box2"></div>
</div>




.row-container {
width:100%;
height:300px;
margin:auto;
text-align: center;
position: relative;
}

.box1 {
height:216px;
width: 288px;  
float:left <-- This does not work
}

.image {
height:250px;
width: 350px; 
float:left <-- This does not work
}

.box2 {
height:216px;
width: 288px;
float:left <-- This does not work

}

asked 1 min ago

Quick

1

CSS Positioning Help - Image Overlapping DIVS on either side