CSS width 100% - X px

[kenzacm]

I have a fluid layout that has a fixed right column, but I can't get it to work properly. This is my site: \[code\]http://65.39.128.45/~jpretty/gallery/mimesis/test-product/\[/code\] (Why can't links contain IP's?)Ignore the left hand column, it's irrelevant. Consider the main big image as the content and the related images as the right column.I found this, and implemented it. It helped but didn't quite fix it:http://www.dynamicdrive.com/style/layouts/category/C13/At my current stage in this endeavor, the problem is that the main image doesn't fill 100% of it's container (100%, minus the 300px for the sidebar). I also need it to maintain a fixed gutter between the two (30px)HTML:\[code\]<div class="imagecol portrait"> <div class="mainimg"> <img class="product_image" id="product_image_15" alt="Test Product" title="Test Product" src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/url.jpg"> </div> <div class="products_list clearfix related-products"> <div class="product"> <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/YugoslavianCamo-200x200.jpg" title="Product 01" alt="Product 01"> <p>Product 01</p> </div> <div class="product"> <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/animals-2-200x200.jpg" title="Product 03" alt="Product 03"> </div> <div class="product"> <img src="http://65.39.128.45/~jpretty/wp-content/uploads/2013/03/url-200x200.jpg" title="Test Product" alt="Test Product"> </div> </div></div>\[/code\]Some CSS:\[code\].single_product_display .imagecol{ width:77%; float:right; margin:0;}.imagecol .mainimg{ width:100%; float:left;}.imagecol .product_image{ margin-right: 330px; cursor:default !important;}.imagecol.portrait .products_list{ margin: 0px 0 0 -330px; float: left; width: 300px; }.imagecol .products_list .product{ margin:0 5px 5px 0; width: 145px; height: auto;}\[/code\]Many thanks in advance for your help