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