How to make my div align in CSS?


Tags: html,css

Problem :

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



Solution :

It works for me.

Your problem is apparently elsewhere.

Can you show us a complete page?


    CSS Howto..

    CSS - how to make content fit to the width/height of paragraph?

    How to make rounded tabs with css? [closed]

    How to stop text in div pushing other divs down the page?

    How to create css classes which are “stronger” that elements?

    How to change custom Check Box border with Dart

    How to put text on the center of a circle using CSS

    How to have menu items streched in full width menu with css for any screen automatically

    How to set the specificity of a css over-ride class for XPages

    How to make gutter between columns in a CSS grid system

    Change Class or CSS “display” property of a DIV and show it smoothly

    Jquery Ui Sortable showing broken image in IE8

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How to make sure that two divs appear side by side? [closed]

    How to implement Star Rating in Intel XDK by App Framework 3.0

    How to make a “” looks like a link with CSS?

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    how to align divs with different width within another parent div?

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How do you Add an image to the left side of a div

    How do I link JS file from other folder to a page?

    How to find all inputs which is not inside one div with css selector?

    How can I resize svg using CSS?

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    How do I remove a hover effect if the Element has focus?

    How to blur one side of the div using CSS

    CSS: How to attach an arrow to a div and make it overlap the border

    Html, CSS - How to create a donut chart like this?

    How to add html glyph markup to JQuery show/hide function

    How to vertically align items in horizontally ul list with images?

    Google font - how to specific font-family If they have the same name?