Приветствую. Есть таблица в три столбика, первый и третий фиксированы по ширине, средний резиновый. В среднем столбце - плавающие блоки (float:left). Этих самых блоков допустим 10 штук. В зависимости от разрешения экрана в средний столбец влазит разное количество блоков. Проблема в том, что средний столбец растягивается на максимально возможую ширину, а хотелось бы, чтобы его ширина равнялась минимально возможной, но вмещала максимальное количество блоков. На данный момент решено с помощью JS, но хотелось бы решение поизящнее. Если непонятно изложено, позже будут картинки. ЗЫ Не слишком силен в верстке, сильно не пинайте)) кстати код: <html> <head> <style> body, body td { margin:1px; padding:1px; font:normal 11px Tahoma, Arial; border:1px solid #cccccc; } .mc { border:1px solid #cccccc; width:300px; height:200px; margin:1px; padding:1px; float:left; } </style> <script language="javascript"> function ArrangeCats() { var node; var ml = 0; document.getElementById( 'tdm1' ).style.width = ''; for ( var i = 1; i <= 12; i++ ) { node = document.getElementById( 'mc' + i ); if ( node.offsetLeft <= ml ) { document.getElementById( 'tdm1' ).style.width = ( node.offsetWidth + 2 ) * ( i - 1 ) + 'px'; return; } ml = node.offsetLeft; } } </script> </head> <body onLoad="ArrangeCats()" onResize="ArrangeCats()"> <div align=center> <table> <tr> <td style="width:250px;vertical-align:top">FIRST COLUMN</td> <td valign=top id="tdm1"> SECOND COLUMN <div> <div id="mc1" class="mc">FIRST BLOCK</div> <div id="mc2" class="mc">SECOND BLOCK</div> <div id="mc3" class="mc">THIRD BLOCK</div> <div id="mc4" class="mc">FOURTH BLOCK</div> <div id="mc5" class="mc">FIFTH BLOCK</div> </div> </td> <td style="width:250px;vertical-align:top">THIRD COLUMN</td> </tr> </table> </div> </body> </html>
