<STYLE>
.out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 0;
}
.in {
text-align:center;
background:#fff;
border:1px solid #555;
position:relative;
padding:5px;
font-weight:normal;
}
.ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.narrow {width:8em;}
h4 {font-weight:bold; color:#000;}
</STYLE>
<DIV class="out narrow"> <DIV class="in ltin tpin"> <H4>Narrow</H4> <P>This is the text that goes in the middle.</P> </DIV> </DIV>
.out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 0;
}
.in {
text-align:center;
background:#fff;
border:1px solid #555;
position:relative;
padding:5px;
font-weight:normal;
}
.ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.narrow {width:8em;}
h4 {font-weight:bold; color:#000;}
</STYLE>
<DIV class="out narrow"> <DIV class="in ltin tpin"> <H4>Narrow</H4> <P>This is the text that goes in the middle.</P> </DIV> </DIV>