This is an inline dialog.

This approach makes use of the "sliding doors" technique of background image layering, where two elements are nested in order to provide "left" and "right" images.

In this particular case, the left images have been cut at 800px width but could easily be larger for fluid use.

The dialog is split up into three main components, following a "header, body, footer" format - specifically, .hd, .bd and .ft in CSS. This formatting approach is the idea of Nate Koechley.

eg.

<div class="dialog">

 <div class="hd">
  <div class="c"></div>
 </div>

 <div class="bd">
  <div class="c">
   <-- main content goes here -->
  </div>
 </div>

 <div class="ft">
  <div class="c"></div>
 </div>

</div>

The header and footer elements are typically empty and serve primarily as hooks for the corners in CSS, but could easily be extended.

The .c class is where the right corner (or side) image is applied.