Gallery view of products in html - css

Question

I have the following content as the first content
#content {
border-radius: 5px;
background:#FFFFFF;
text-align:left;
padding:20px 20px 5px;
margin:15px 0 15px 0;
}
inside them I have two divs that both float to left as below:
<div id="content">
<div class="my_left_menu">
//this floats left
</div>
<div class="my_right_content">
//this also floats left
</div>
</div>
Now in the right content I want to have a gallery of products like shown in on line shopping website. So I created another div class that floats left and placed all the images inside it, but every image is coming vertically. But I want it to be something gallery view or grid like view. How can I do it ? any idea please?

Answer 1

If I understood you right you want to show a grid-like list of products on your right side div that is div.my_right_content but they are shown vertically.
Basically what you need to do is to tell the inner div tags which are your products not to take all the width available. A simple way is to give them a fixed width and if the browser is resized or your page is being displayed on a smaller screen then they can align vertically to have enough space for your content. Here is what you can do:
<div id="content">
<div class="left-col">
</div>
<div class="right-col">
<div class="product">
... your product info and content
</div>
<div class="product">
... your product info and content
</div>
</div>
</div>
And then give them a style rule like this
.product {
width: 100%;
max-width: 200px;
display: inline-block;
}
So they will align horizontally and when the browser width is not enough to hold two 200px wide products horizontally they will be aligned vertically. This also means that if your .right-col container is 600px in width it will hold three products in each line.
If you want it to be more perfectly aligned you may want to give each product a fixed height too.
Regards,
Shakib