Question

I use the following code to display a product. 3 products per row(each li is floated left)
The products are filtered with javascript also…
The problem is with div with class features… It is fixed height of some em.But i would like it not to be fixed height…If it is variable height then products at next rows wont be at the same y position .
The only solution i can figure is to add a clearer li..But that would require extra code for javascript when filtering products..
Any other idea ?

<li class="product f_manufacturerBreak_A_Way f_colorgrey ">
                <p class="title">Bolle Beaumont</p>
                <div class="imagePriceContainer">
                    <div class="imageContainer"><img alt="product" src="/photos/small/sunglasses/bol0112kk.jpg" width="100" /></div>
                    <div class="priceContainer">
                        <p class="price">130.00&#8364;</p>
                        <p class="priceNoDiscount">from <span>134</span></p>
                        <div class="actions">
                            <p class="action">Details</p>
                            <p class="action">Buy</p>
                        </div>    
                    </div></div>
                <div class="features">Sizes: S, L, XL<br />
    Colors: Black, Blue, Green, Red, White</div></li>

Answer 1

Maybe this could be at help?

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Or you could try something like this

http://jsfiddle.net/PkFpr/