How to show a title in the border of a div [duplicate]

Question

For a client we are building a new website. They want a effect where the title is in the border of a text-area. How can this be done with CSS/HTML. The effect I want to create looks like this:

In this image the background is green but in some cases this is a image. So a overlay with a background color in the text won't work.

Any ideas?

Answer 1

Here is an example I made for you. You just need to apply position: absolute; to the contact div and then set up where you want it to overlap the next div. http://jsfiddle.net/tzrhcmb4/

<div class="main">
   <div class="container">
      <div class="text-header">CONTACT</div>
          <div class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing  software like Aldus PageMaker including versions of Lorem Ipsum.

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

 css:

.main { background: green; width: 500px; height: 300px;}
.container { width: 100%; height: 100%; padding-top: 20px;}
.text-header { color: white; text-align: center; top: 30px; width: 110px; left: 35%; position: absolute; background: green;}
.text { margin: 10px; text-align: left; padding: 20px 10px 20px 10px; border: 2px dashed lightgreen;}