Фон и позиционирование

[icelord]

Возникла проблема при в?рстке, а именно с фоном, при позиционировании

#block {
	border: 1px solid black;
	width: 300px;
}
#block .title {
	background-image:url(images/bg.gif);
	width: 250px;
	border: 1px solid red;
	height: 30px;
	display: inline;
}
...

<div id="block">
  <img src="images/left.gif" width="7" height="26"/>
  <div class="title">Заголовок</div>
  <img src="images/right.gif" width="7" height="26" />
</div>

Для того, что бы правая картинка не переносилась на новую строку я использовал свойство display: inline да, картинка не переносится, но title потерял свою ширину и фоновая картинка пропала.

Если же изменить в классе title свойство на display: block, то заголовок снова становится блочным элементом (переносится с новой строки и не обособляется другими элементами), принимает заданную ширину и фоновая картинка становится видна. НО! Это не то, что требуется.

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

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

Подскажите, какой же здесь выход, что бы между двумя картинками можно было расположить элемент (div, span или что-то другое?) с фоном, а в самом элементе писать текст, причом элемент с фиксированной шириной и высотой.

Второй день не могу сделать.

[Иван Шумов]

img { display:block; float:left; }

div { float:left; }

[icelord]

Большое спасибо, то что надо

[yopopt]

img { display:block; float:left; }

display:block; ненужен. Элемент автоматически становится блочным.