CODEWITHSUNDEEP
htmlcss
Frank Kluytmans
Frank Kluytmans

Reputation: 543

List items don't vertical align properly

I'm trying to make a list of items with variable heights. When I try to make a neat list with items aligned in horizontal rows it all goes well when the list items all have the same height. When 1 or more items have a greater height it goes wrong. I created a JSFiddle to show the problem very clearly. Can anyone help me out?

http://jsfiddle.net/NNLDn/

my html:

<div>
    <ol>
        <li></li>
        <li></li>
        <li style="height: 140px;"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

my css:

div {
    width: 730px;
}

ol {
    width 730px;
    margin-left: -40px;
}

ol li {
    display: block;
    width: 167px;
    height: 120px;
    margin: 0 0 15px 15px;

    background:red;
    float: left;
}

Upvotes: 1

Views: 242

Answers (3)

Rob Audenaerde
Rob Audenaerde

Reputation: 20019

I can't double check easily now, as I am in my phone, but I think you need to use display:inline-block and not use float

Upvotes: 0

xpy
xpy

Reputation: 5611

You should consider using display:inline-block instead of float:left, then you can also play with the vertical alignment of the elements with vertical-align.

Upvotes: 4

Michael Peterson
Michael Peterson

Reputation: 1123

The only css solution I know, if you know the number of li items per row, is to enclose each row in a div, and then float these divs. That way each div with automatically adjust to the height of the tallest li, and none of the floating lis will get "hung-up"

div div { float: left; clear: both; }

http://jsfiddle.net/NNLDn/1/

Upvotes: 1

Related Questions