Question

I’ve created a container with a width:90% (and 10% of padding) and within it are three display:inline divs with a width:30%

This didn’t have the desired effect, I wanted the three divs to stretch to 30% of the container, thus filling the whole container.

First go creating something responsive. I intend to put my images within these divs with a max-width to create a responsive grid of products.

JS Fiddle

As you can see the product divs are simply stretching to the size of the text, when I want them to expand to fill the content area.

Live example

CSS:

.shoppg #content{
  width:90%;
  margin-top: 60px;
  margin-left:5%;
  margin-right:5%;
}

.product{
width:30%;
display:inline;
}

HTML:

<div id="content">
      <div class="product">
        product 1
      </div>
      <div class="product">
        product 2
      </div>
      <div class="product">
        product 3
      </div>
</div>

Answer 1

Here is what you’re looking for:

http://jsfiddle.net/abrdn/6/

Basically, you need to float them to get them to meet your requirement of filling to fit the div.

But since your ultimate goal here is a responsive design, you need to give your product divs a fixed width, otherwise, they won’t go from being on the same row to being vertically stacked when the display becomes too small. Like this…

http://jsfiddle.net/abrdn/10/

Notice how the divs instead go to another row, instead of simply squishing together and getting smaller when you use a percentage width.

You can extend this a little furth, to do a fixed min-width with a percentage width to allow it to fill, but then go to a new row once the min-width is reached, like this:

http://jsfiddle.net/abrdn/12/