Question

I have a fluid width layout. Left and right column have a fixed width and my center column changes its width in between max and min width specified as the browser width changes or screen resolution changes. It looks like image below:

As you can see, there are some small containers in middle column, they hold up several products etc.

The problem that I am experiencing is that when the width changes and middle column cannot accommodate 3 containers, 1 will fall below, as they are floated and then it looks like something below:

Now this space that comes in the right of containers looks ugly. What I want to do is to keep them centered if one falls below when width decreases then two should appear in the center of the middle column and when another one falls then 1 container left should also appear in the middle like below:

Can I do this with css only? or I need to introduce some scripting language for doing it dynamically?

This is the css for container, that I am using

.prod-container{
    float: left;
    width: 180px;
    height: 290px;
    margin: 2px 6px;
    border: 1px solid black;
}

Example on http://www.myappontest.heliohost.org/index1.html

Answer 1

Replacing float: left; with display: inline-block; in .prod-container‘s style and adding text-align: center; to #center-content-container‘s style will achieve the desired behavior.

Working version of your page: little link. Here’s the modified CSS file, too: another little link.

Hope that helped you in any manner!