Circle in between 2 div

Question

how do I achieve this in CSS.

Currently I have tried everything I know but failed. My basic structure was like this.

<div>
  <div class='pink-div'></div>
  <div class='blue-cirle-div'>
    <div> Some Text </div>
  </div>
  <div class='yellow-div'></div>
</div>

Thanks.

Answer 1

Here you go.

The HTML:

<div class="main">
  <div class='pink-div'>&nbsp;</div>
  <div class='blue-cirle-div'>
    <div class="forsomeText">Some Text</div>
  </div>
  <div class='yellow-div'>&nbsp;</div>
</div>

The CSS:

.main{position:relative;}

.pink-div {
    background: none repeat scroll 0 0 #feaec9;
    height: 110px;
}

.yellow-div {
    background: none repeat scroll 0 0 #b5e51d;
    height: 110px;
}

.blue-cirle-div {
    background: none repeat scroll 0 0 #3f47cc;
    border-radius: 110px;
    display: block;
    height: 140px;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 18%;
    vertical-align: middle;
}


.forsomeText {
    display: block;
    margin: 0 auto;
    padding: 60px 37px 37px;
    text-align: center;
    vertical-align: middle;
}

The live fiddle link:

WORKING DEMO

I hope this helps.