<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
.contenedor {
height: auto;
border: 1px solid transparent;
margin: 0 auto;
padding: 0;
position: relative;
}
.centro {
background:url('borderedondeadocentro.gif') repeat-x top left;
color: #c5c5c5;
font: bold 15px verdana;
height: 35px;
margin: 0;
text-align: left;
padding: 6px 20px;
width: auto;
position: absolute;
top: 0;
right: 6px; /* el ancho de las imágenes laterales */
left: 6px; /* el ancho de las imágenes laterales */
}
.cerrar:after {
color: #c5c5c5;
font: bold 12px verdana;
float: right;
content: "X";
border: 1px solid #c5c5c5;
}
.izq {
background:url('borderedondeadoleft.gif') no-repeat top left;
height: 35px;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.der {
background:url('borderedondeadoright.gif') no-repeat top right;
height: 35px;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.contenido {
background-color: #5B5B5B;
font: 12px verdana;
color: #c5c5c5;
border: 1px solid #848484;
width: auto;
margin-top: 35px; /* largo de la imágenes */
padding: 10px 7px;
}
</style>
</head>
<body>
<div class="contenedor" style="width: 500px;">
<div class="izq"></div>
<div class="centro cerrar">Título</div>
<div class="der"></div>
<div class="contenido">Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
</div>
</body>
</html>