How to overlap top div tags in css

Question

Can someone please explain to me how I can accomplish the following effect in CSS. I need a div on the bottom and two divs overlapping it on top as the image illustrates below.

Answer 1

The key is to adjust the top margin of the smaller divs. Setting it to a negative value will pull them over the larger one. See code below.

Alternatively, you could wrap the smaller divs in a larger one and adjust the bottom margin to pull them down below.

.under {
  width: 400px;
  height: 150px;
  background-color: #3C77D4;
}

.over{
  background-color: #0E49AC;
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 0 23px;
  margin-top: -80px;
}

<div class="under"></div>
<div class="over"></div>
<div class="over"></div>

Answer 2

As the comment of @Liquidchrome statens there are many ways:

spencerlarry posted one possible way, here is another, it is just usefull if you have defined width which might even be calculated by you

here is my code:

<div class="container">
    <div class="topPane">
      <div class="overlappingPane">

      </div>
      <div class="overlappingPane">

      </div>
      <div class="clearPane">

      </div>
   </div>
</div>



.container{
  display:inline-block;
}

.topPane{
  width:270px;
  height: 50px;
  border: 2px black solid;
  background-color:red;
}

.overlappingPane{
  background-color:blue;
  float:left;
  width: 90px;
  height:90px;
  margin: 20px 20px 20px 20px;
  border: 2px black solid;
}

.clearPane{
  clear:both;
}

and here the Link to jsfiddle: https://jsfiddle.net/npnz85x0/