make twenty twelve horizontal website

Hi

I’m building a child theme from the wp Twenty-Twelve theme. I’m quite in an advanced stage of restyling the website. It has an horizontal scroll structure for the posts, so each sits next to each other to the right. At the moment I have set a fixed width to my category div of posts, so the horizontal scroll is working.

How can I make the browser width adjust automatically as new posts are added? Do I need any javascript to make this work?

my code is this (shopp is an e-commerce plugin btw, but I’d appreciate even if someone could explain me the logic to do this with regular wp article and posts):

#shopp .category { width:7000px }

.shopp_page .products, .shopp_page .products ul { display: inline-block; position: relative; overflow-x: scroll; white-space:nowrap; margin: 0; padding: 0; }
.shopp_page .products > .product {  width:1200px; margin-right:100px; }
.shopp_page .products > .product.first { margin-left: 0; width:1200px; margin-right:100px; clear: none;}

I’m really under pressure to solve this…. many thanks in advance for any help!