Грамотная верстка 3х элементов

[Rise]

  Reveal hidden contents

Пунктир - граница элементов.

Имею 3 графических файла. Вместе они составляют одно целое. Высота среднего элемента непостоянна.

Как грамотно сверстать эту вещь?

Мой вариант:

<div style="background: url('/paper/1.png') no-repeat;height:46px"></div>
<div style="background: url('/paper/2.png') repeat-y;height:400px"></div>
<div style="background: url('/paper/3.png') no-repeat;height:25px"></div>

Уверен, что мой код создаст массу проблем при последующей верстке.

[alexandr_v-vich]

Пишите стили в отдельном css.

У среднего блока замените height на min-height. А остальное нормально, вроде, всё.

[Yazon_Nile]

Обычный, тянущийся PNG блок.

Способов сверстать масса.

Хотя бы так

<div class="box">
	<div class="title">
		text
	</div>
	<div class="frame">
		text
	</div>
</div>

Стили такие:

на box вешаешь нижний бг и паддинг на высоту этого бг.

На title - верхний бг и высоту

на frame рипит среднего однопиксельного бг