This is an inline dialog.

Note this particular version will not render correctly in IE < 7, as no DirectX/alphaImageLoader filters are being applied.

As alpha transparency is being applied with the PNGs, margins are used to make room to allow the "sliding doors" technique to have a transparent right-hand corner that does not have the left side tiling underneath it.

For example: The top right-hand corner image is 14px wide - so a margin-right:14px is applied to .hd, and then a margin-right:-14px is applied to .hd .c in order to "pull back" the right corner image into the "empty" space left by the first margin. (Neat trick, eh?)

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.