浮动div不能正确包装

Question

I have a product table with various categories. In a teaser page, I show each category and between 2 to 5 product images belonging to that category.

I want them displayed such that the category divs are floated to the left and the wrap around if a category div cannot fit into the same row because of width constraint. I have following CSS that I use for the same:

.prod-table
{
    display: table;
    float:left;
    border: 1px solid red;
    margin:5px;
    padding:5px;
}

.prod-cell
{
    display: table-cell;
    float:left;
    padding:5px;
}

.spread-image
{
    display: block;
    width: 100%;
    height: auto;   
    max-height: 200px;

}

The HTML is as follows:

<div class='spread-table'> <-- this loops for categories
    <div class='spread-cell'> <-- this loops for image in categories
        <div style='position:relative;'>
        <img src="{{image.url}}" class='spread-image'>
        </div>
    </div>
    <div class='clearfix'></div>
    <div style='text-align:center'><strong>View More</strong></div>
</div>

This seems to float the images correctly, however from time to time I get into a situation, where category div wraps to the next row, but does not start at the left end, but rather somewhere in the middle of the row. Like so:

[---category 1---] [-category 2-] [----category 3----] [--category 4--]
                   [---category 5---] [-category 6-] [---category 7---]
[-----category 8----] [---category 9---] [-category A-] [---category B---]
                                         [-category C-] [-category D-] etc 

I have added the dashes to indicate that different categories have different widths. In above layout, you can see that the first and third rows are wrapping correctly, while the second and fourth are not.

When category 5 & category C wraps incorrectly you can see that they align themselves to one of the category divs from their above row. In this example category 5 aligns with second div in above row and category C with third div.

I guess this might be a small fix, something weird related to CSS, but I am not able to figure it out. Any help is greatly appreciated!

Answer 1

Take a look at this example:

http://jsfiddle.net/x6fkm411/

I demonstrates the behavior of float: left , if the elements don't have same heights. It's the same behavior as you illustrate. So check the actual heights of your elements

Also you combine float:left and display: table-cell in one CSS rule. The display won't apply, but will be implicitly set to display: block . See here: http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

edit

To achieve what I think you want to achieve, try display: inline-block with a hack: http://jsfiddle.net/12vj3y5g/1/ or flex layout https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edit2

The float issue even applies, when there is only 1px in height difference
See here http://jsfiddle.net/gtkp82pf/

Answer 2

This is how I would do it (comments in code to help explain what I have done):

 .table-wrap { display: inline-block; vertical-align:top; } .spread-table { display: table; border: 1px solid red; margin: 5px; padding: 5px; } .spread-row { display: table-row; } .spread-cell { display: table-cell; /* remove float:left - you cannot have both float:left and display:table-cell*/ padding: 5px; } .spread-image { display: block; height: auto; max-height: 200px; float: left; margin:10px; } strong.spread-cell { text-align: center } 

 <div class='table-wrap'> <!-- instead of floating the table, make it inline-block so the wrap is natural and if the heights are out you won't get the stacking issue --> <div class='spread-table'> <!-- direct children of display-table should only either all be display:table-row or all be display:table-cell, if you have a mixture of block and table-cell it will ruin the layout (think of mixing tds with divs) --> <div class='spread-row'> <!-- this needs to be a row to get the view more below --> <div class='spread-cell'> <!-- you can't loop this cell as css has no such thing as colspan and as you have a row below with only one cell in, this row can only have one cell --> <img src="http://lorempixel.com/800/800/city/1/" class='spread-image'> <img src="http://lorempixel.com/800/800/city/2/" class='spread-image'> <img src="http://lorempixel.com/800/800/city/3/" class='spread-image'> <img src="http://lorempixel.com/800/800/city/4/" class='spread-image'> <!-- loop the image instead --> </div> </div> <div class='spread-row'><strong class='spread-cell'>View More</strong></div> </div> </div> 

EDIT

As per HerrSerker's comments, remove table structure all together:

 .category-wrap { display: inline-block; vertical-align:top; } .image-holder img { max-height: 200px; } .more { text-align: center; } 

 <div class='category-wrap'> <div class='image-holder'> <img src="http://lorempixel.com/800/800/city/1/" class='spread-image'> </div> <div class='more'><strong>View More</strong></div> </div>