box wrap

by Laurel Bruggeman

HTML

<div>Other content</div>
<div class="box">
    <h2 class="box-title">Box Title</h2>
    <div class="content">This is box content</div>
</div>   
<div class="box">
    <h2 class="box-title">Box Title</h2>
    <div class="content">This is box content</div>
</div>   
<div class="box">
    <h2 class="box-title">Box Title</h2>
    <div class="content">This is box content</div>
</div>   
<div>Other content</div>

CSS

body{
    font-family: Arial;
    background-color: #d2d2d2
}
.box{
    width: 300px;
    border: 1px solid blue;
    border-radius: 5px;
    position:relative;
    padding: 1em;
    margin: 2em 0.5em 1em;
}
.box-title{
    margin:0;
    position: absolute;
    top: -0.7em; left: 0.5em;
    background-color: #d2d2d2;
    padding: 0 0.5em;
    color: blue;
}