K-U-H-N.net

• 
  Some descriptive text could go here. Note how the text does not exceed the max-width. The overall max-width is set to 500px, which happens to match this image's width
• 
  If the max-width exceeds the images width and the desciptive text is long enough, the box expands until it reaches the max-width. To see what happens when there is just a short desciptive text see imgage #3...
• 
  Short text - no unnecessary expansion
• 
  Of course it is also possible to make the frame box transparent
• 
  If the image width exceeds the max-width setting for the descriptive text the boxs expands to wrap the image, leaving the max-width untouched
• 
• 
• 

This is based on Stu Nicholls' CSS lightbox - Click Version with the following changes/improvements made:

• Javascript is no longer required in IE6-.
• Placement and design of the close-symbol is now independent from the main page design.
• The lightbox's content is positioned vertically in relation to the viewport height instead of a fixed distance from the top of the viewport (the latter is still possible, though).
• The lightbox's content is placed in a box with a maximum width in regard to the descriptive text. If he image width is bigger than the maximum width the box expands to hold he image.
• Scrolling is supported for all gallery-containers in standard browsers (and IE7+) and for static containers in IE6 (Standard Mode).

Still, there are some restrictions... some old, some new:

• In IE6-, the gallery must not have any positioned ancestors that do not occupy the entire viewport. Also, overflow: hidden has to be set for the gallery's first positioned ancestor (usually body or html).
• Scrolling in gallery-containers can cause problems in IE5.5-/IE6(Quirksmode), due to a bug that makes a container with overflow:auto or scroll the containing block for its positioned child elements.
• Scrolling in IE7- can cause problems with other positioned page elements due to an IE7- bug.
• There still can't be any links inside the lightbox (as nested links are illegal in (x)html).
• In Webkit Browsers (Safari, Chrome) you still have to keep pressing the mouse button to view the lightbox. This can easily be fixed using javascript.

A simpler, more accessible version can be found here.

The Code is intentionally overcommented, as I was hoping to avoid writing a tutorial.

Vertical Positioning is based on a concept described by at Dušan Janovský, images taken by Jon Sullivan.