CODEWITHSUNDEEP
javascripthtmlcss
themajiks
themajiks

Reputation: 420

li items of different height

I want to allow liitems to have the same width but different height that may include images and text. the problem is when i float left, or display:inline-block, and one of the item exceeds the height. It disturbs the visual style of the content. Is there any way where i can manage this?

I want the li to follow a simple rule as

li {
    float:left;
    display:list-item;
    width:200px;
    background:#CCC;
    height:auto;
    padding:10px;
    margin:0 10px 10px 0;
}

The example website which includes the same is

Genny Website

Upvotes: 1

Views: 656

Answers (3)

Nick Beranek
Nick Beranek

Reputation: 2751

Sites like genny.com and pinterest.com do NOT float their elements, but rather position them absolutely and set their left and top values dynamically through JS. First, they grab the count of elements on the page. Second, they sniff the height and width of the elements. Third, they change the left and top CSS values.

+1 for the Masonry answer, I just wanted to explain how it works.

Upvotes: 4

Michael Peterson
Michael Peterson

Reputation: 1123

I think you would need to create three columns. something like:

<ul id="first column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>
<ul id="second column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>
<ul id="third column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>

Then you shouldn't have to float the li tags.

Upvotes: 3

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

jQuery Masonry will be what you're looking for here, by nature the li's will never really bump up to the one above them without some less-than desirable code, but that jQuery plugin makes it very simple.

Upvotes: 3

Related Questions