Question

I’m trying to get multiple divs sitting next to each other, centered. When the window gets too small to fit all the divs in one row I would like the overflowing divs to bump down to the next row. Preferably aligned left but still centered.

If this isn’t possible I’d also be happy to have them just be centered aligned.

An example of how I would like this to function is the large thumbs at the bottom of this page http://www.klossal.com/portfolio/index2.html

The current page I’m having trouble with is here http://www.klossal.com/portfolio/test.html

Here is my current code:

<div
    align="center"
    style="
        clear:both;
        margin-left:auto;
        margin-right:auto;
        width: 100%;
        visibility: show;"> 


    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img         src="http://www.klossal.com/portfolio/library/space/space_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0"  style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
        </div>
    </div>

    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img src="http://www.klossal.com/portfolio/library/glow/glow_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0"  style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
        </div>
    </div>

    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img    src="http://www.klossal.com/portfolio/library/faces/faces_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
        </div>
    </div>

    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img src="http://www.klossal.com/portfolio/library/color/color_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
        </div>
    </div>

    <img src="/media/divider.png" width="100%" height="52px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
</div>

Answer 1

Correct me if I’m wrong but you mean something like:

<div class="container">
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/space/space_lib.png" />
            <p>Picture one..</p>
        </a>
    </div>
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/glow/glow_lib.png" />
            <p>Picture two..</p>
        </a>
    </div>
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/faces/faces_lib.png" />
            <p>Picture three..</p>
        </a>
    </div>
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/color/color_lib.png" />
            <p>Picture four..</p>
        </a>
    </div>
</div>

I think?

Check the JSFiddle here…