Автоматическая мультибраузерная подгонка ширины div под картинку

[extruder]

На страницу вставляются иллюстрации, они имеет комментарий внизу, и все это дело обводится рамочкой.

<div class="illustration">
  <img src="image.jpg">


  Комментарий
</div>

Следующий стиль

.illustration{
  width: 540px;
  _width: 556px;
  text-align: center;
  border: 1px solid #B0B0B0;
  padding: 8px;
}

Это ныне работающий мультибраузерный вариант.

Но хочется, чтобы можно было вставлять картинки не только стандартной ширины 540px, но и меньшей ширины. И чтобы при этом рамочка вокруг была всегда на расстоянии 8px, то есть чтобы div уменьшался по ширине.

Проблема в следующем. Если поставить width:0, то в IE это работает, а в FF и в Опере нет. Каким образом можно задать мультибраузерную автоматическую подгонку размеров блока под содержащуюся в нем картинку?

Прошу помочь.

Спасибо.

[Сухов]

Ширину не задавайте, а задайте float, например:

.illustration {
  float: left;
  text-align: center;
  border: 1px solid #B0B0B0;
  padding: 8px;
}

[extruder]

А как при этом сделать, чтобы вся эта конструкция была выровнена по центру по горизонтали?

[Сухов]

Во первых, это зависит от способа верски всей страницы, а именно от вашего конкретного случая. Сделать необходимую вам конструкцию можно кучей способов.

1. Поместить слой в таблицу 100%-ой ширины и тремя ячейками, в центральную, с заданием ширины крайних в 50%.

2. Вычислять ширину каждого изображения (например с помощью GD в случае PHP) и прописывать ее в style="width:... (имхо не лучший способ).

3. Или вообще использовать табличный контейнер для изображения.