How to make my div align in CSS?

Question

This is my actual div: Pic1

This is the Pic1 HTML code, it will loop based on the database:

<ul class="productUl">
    <li class="productLi">
        <div class="productItem">
                   <!--my div content-->
        </div>
    </li>
</ul>

This is my CSS code:

.productItem{
    width: 15em;
    height: 13.8em;
    text-align:center;
    background-color: red;

}
.productUl{
    width: 750px;
    text-align:center;
    list-style-type:none;
    padding:5px;
    margin: 0;
} 

.productLi{
    width: 15em;
    float: left; 
    padding:0px 5px; 
}

But I found that my productItem is up and down, can not in same position Y, I know that I can set the position Y manually, but apart from setting position Y, can I do still keep them in position Y? any ideas on that?

This is what I want: Pic2

Answer 1

I believe this will work:

.productLi {display: inline; /* or inline-block */ }

Answer 2

It works for me.

Your problem is apparently elsewhere.

Can you show us a complete page?

Answer 3

Hi,

I would recommend not to float the li, but set its display to inline or inline-block. You might also need to set a white-space: nowrap to the ul.

Hope that helps, harpax