Ну сократить можно примерно до такого:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<html>
<head>
<title>test</title>
<style type='text/css'>
div.label { border: 1px solid #333; width: 360px; padding: 2px; }
</style>
</head>
<body>
<div id="main">
<div class="device">
<div onclick="return evtClickTreeItem(this);" class="icon" title="Раскрыть/свернуть"></div>
<div class="label">
<div class="host">host1 title</div>
<div class="info">host1 description</div>
</div>
</div>
<div class="device">
<div onclick="return evtClickTreeItem(this);" class="icon" title="Раскрыть/свернуть"></div>
<div class="label">
<div class="host">host2 title</div>
<div class="info">host2 description<br/><img class="graph" src="..."/></div>
</div>
</div>
</div>
</body>
</html>
На страницу выводятся блоки с описанием устройств, как правило блоки фиксированной ширины.
Для некоторых устройств (host2) в описании выводится картинка, в этом случае блок должен быть растянут по размерам картинки.
В реальной задаче устройства могут быть вложены одно в другое, глубина вложений произвольная.
Прикладываю скриншот реальной страницы, в данном примере картинка ужата, чтобы уместиться в ширину блока. А мне нужно растянуть блок, чтобы картинка отображалась в размере 100%.
