DIVS on top of each other. Is it possible to do what appears on the image using only CSS?

Problem

This is what I'm trying to achieve. It's possible using CSS only or images must be used ?

This is what

Thanks.

Problem courtesy of: synclabs

Solution

sdleihssirhc's answer is great if you want to use a fieldset, if you want to keep it to divs play around with this jsfiddle:

http://jsfiddle.net/qT3Hz/1/

Here I'm using position relative and placing it in the center of the other div and moving it up outside the container.

Note: this is using css3 rounded corners, so browsers without css3 support will see square corners.

Solution courtesy of: mynameiscoffey

Discussion

Here's my take on it:

http://jsfiddle.net/U69Fv/

<fieldset class="content">
    <legend class="title">Lorem Ipsum</legend> 
</fieldset>

.title{
    margin:0 auto -1.25em;
    padding:.25em;
    width:25%;
    text-align:center;
    background-color:#fff;
    color:#000;
    border: 5px solid #ffce96;
    border-radius:8px; 
}

.content{
    margin:0 1em;
    padding:4em;
    background-color:#efdefe;
    border: 5px solid #ffce96;
    border-radius:8px;
}

Edit: Damn, always too slow with my stuff. Oh well, plenty of options to pick from now.

Discussion courtesy of: MetalFrog

You can use "position:relative" and move the element using "top, right, left or bottom" can you post the code?

Discussion courtesy of: Erick

Here's a simple proof of concept that uses border-radius with a <legend>:

how it looks in Chrome

HTML:

<fieldset>
    <legend>hello, world</legend>
</fieldset>

CSS:

fieldset {
    background:#eee;
    border:3px solid #ffd099;
    border-radius:10px;
    height:3em
}

legend {
    background:white;
    font:.75em/1.75 "Trebuchet MS", Helvetica, sans-serif;
    border:3px solid #ffd099;
    border-radius:5px;
    width:10em;
    text-align:center
}

Depending on which browsers you're trying to support, the answer is

Yes, it is possible with just CSS.

...or were you trying to keep it to just <div> elements?

Discussion courtesy of: sdleihssirhc

This recipe can be found in it's original form on Stack Over Flow.