Разное количество картинок в зависимости от ширины окна
 

Код позволяет в зависимости от ширины экрана выводить разное количество товаров (пример http://www.ozon.ru/) в строке. Т.е. на больших экранах в строке показывается 5 картинок, при уменьшении окна браузера количество картинок уменьшается. Шаблон сайта состоит из левой, правой колонки и по центру (<div id="content">) показываются картинки. При уменшении окна браузера до размера смартфона убираются левая и правая колонки, соответственно размер центральной части увеличивается (<div id="content_xs">). При увеличении центральной части скрипт не работает корректно (не выравниваются картинки по центру). Как я понял, это связано с тем, что скрипт ширину экрана в первый раз уже расчитал (для <div id="content">). Посоветуйте, как сделать, чтобы скрипт работал для обоих случаев (div-ов)? Надеюсь понятно изложил вопрос.

<style>
#new_goods { margin:0 -3px; height:264px; overflow:hidden;}
#new_goods2 { margin:0 -3px; height:264px; overflow:hidden;}
.item {float:left; height:264px; min-width:180px;}
.border { margin:5px; height:264px;}
 .columns1 .item{width:100%} 
 .columns2 .item{width:50%} 
 .columns3 .item{width:33%} 
 .columns4 .item{width:25%} 
 .columns5 .item{width:20%} 
 .columns6 .item{width:20%} 
 .columns7 .item{width:20%} 
 .columns8 .item{width:20%} 
</style>

<script type="text/javascript" charset="utf-8">
window.onresize = CountColumnsAndSetClass1;
window.onload = CountColumnsAndSetClass1;
// Присваиваем нужный класс для блока new_goods (columns1, columns2, columns3 ... )
function CountColumnsAndSetClass1(){
 
 var c=Math.floor(document.getElementById('new_goods').offsetWidth/(185));  // число - это максимальная ширина блока
 cc = c>0?c:1; //кол-во колонок
 document.getElementById('new_goods').className = 'columns' + cc;
 //ShowUsScreenWidth();
 
 var c2=Math.floor(document.getElementById('new_goods2').offsetWidth/(185));
 cc2 = c2>0?c2:1;
 document.getElementById('new_goods2').className = 'columns' + cc2;

}
</script>

...

<span class='hidden-xs'>
            <div id="content">            
<div id="new_goods" class="">                                 
<table style="text-align: center; vertical-align: top; width: 100%;" border="0" cellpadding="0" cellspacing="0">
        <tbody>
<tr><td>картинка1, название1, цена1</td></tr>
<tr><td>картинка2, название2, цена2</td></tr>
<tr><td>картинка3, название3, цена3</td></tr>
<tr><td>картинка4, название4, цена4</td></tr>
<tr><td>картинка5, название5, цена5</td></tr>
  </tbody>
</table>
</div><!-- #new_goods-->
			</div><!-- #content-->
</span>

<span class='visible-xs'>
            <div id="content_xs">            
<div id="new_goods2" class="">                                 
<table style="text-align: center; vertical-align: top; width: 100%;" border="0" cellpadding="0" cellspacing="0">
        <tbody>
<tr><td>картинка1, название1, цена1</td></tr>
<tr><td>картинка2, название2, цена2</td></tr>
<tr><td>картинка3, название3, цена3</td></tr>
<tr><td>картинка4, название4, цена4</td></tr>
<tr><td>картинка5, название5, цена5</td></tr>
  </tbody>
</table>
</div><!-- #new_goods2-->
			</div><!-- #content-->
</span> 

...