CSS width 100% - X px

Question

I have a fluid layout that has a fixed right column, but I can't get it to work properly.

This is my site: http://65.39.128.45/~jpretty/gallery/mimesis/test-product/ (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:

<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>

Some CSS:

.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;
}

Many thanks in advance for your help

Answer 1

I managed to work it out, the problem was that the <img> didn't expand in the same way that the <div> did in the tutorial (http://www.dynamicdrive.com/style/layouts/category/C13/). the solution involved wrapping the main image in another <div> So the HTML became this:

<div class="imagecol portrait">
    <div class="imagecolwrapper">
        <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>

    <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>

And the CSS became this:

.single_product_display .imagecol{
    width:77%;
    float:right;
    margin:0;
}
.imagecol .imagecolwrapper{
    width:100%;
    float:left;
}
.imagecol .mainimg{
    margin-right: 330px;
}
.imagecol .product_image{
    width:100%;
    cursor:default !important;
}
.imagecol.portrait .products_list{
    margin: 0px 0 0 -300px;
    float: left;
    width: 300px;   
}

Answer 2

My suggestion is for you to embrace a fully responsive layout. Find a % width of your parent element that closely represents the width of your right column. Use nothing but %'s for your widths and margins, and make sure that the total of all of these equal 100%. For example:

In the diagram below, each * represents 5% of total width of your layout.

|****|*|**********|*|****|
|    | |          | |    |
|    | |          | |    |
|20% |5|    50%   |5|20% |
|    |%|          |%|    |
|    | |          | |    |
|****|*|**********|*|****|

20 + 5 =25 + 50 = 75 + 20 = 95 + 5 = 100%

Answer 3

it is because you have this css rule:

.imagecol.portrait .product_image {
    width: 55%;
}

that forces your image to span 55% of it's container.