the url to my site is
I am trying to set each image as width:100% so that I can make my design responsive.
Each image is in a div called .product, which has a width of 100%. So why wont the image take up the entire width of div.product?
Heres my code:

<div id="columns">

    <div class="product"><img src="images/products/floral_basket1.jpg" width="400" height="394" border="0" alt="Floral Basket 1" /></div>



#pages.products #columns{
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;

#pages.products .product{
    margin:0 0 30px 0;
    -webkit-column-break-inside: avoid;

Your product div may take up 100% but the image size inside it is set to 400x394 by your code. If you don't set width and height then it will default to the image size. You will have better luck putting the image in the background and using css 'cover' or 'contain'.
See the following