CODEWITHSUNDEEP
htmlcsshtml-lists
Meisam Mulla
Meisam Mulla

Reputation: 1871

Is this possible with lists?

I'm wondering if its possible to make a list like this: make list like this

Or should I just use divs to accomplish the same thing?

Upvotes: 3

Views: 103

Answers (4)

Darko
Darko

Reputation: 38860

It is possbile with pure CSS (floats) to get a list like:

LI1    LI2
LI3    LI4
LI5    LI6


but to get: 

LI1    LI4
LI2    LI5
LI3    LI6

you'd need to use javascript or 2 lists with css styling. (EDIT: or as another answer by cale_b mentions, for modern browsers you could use column-count)

the css for my first scenario would look something like this:

ul { width:400px; overflow:hidden; margin:0; padding:0; }
li { width:200px; float:left; margin:0; padding:0; }

adjust your widths, margins and paddings to your liking of course

Upvotes: 5

Scott
Scott

Reputation: 21892

Easily possible with lists. Have you tried?

It's just a matter of CSS.

Stab in the dark:

ul { list-style: none; width: 400px; background: #eee; }
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; }​

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

Demo here

Upvotes: 1

okayGraphics
okayGraphics

Reputation: 375

I suppose you could, but two divs with one list each I think would work better.

Upvotes: 1

random_user_name
random_user_name

Reputation: 26160

Sure. Depends on if you need the items to flow down first in columns, or if it can flow left-to-right.

If left-to-right is OK, just assign a display: block, float: left, and width to the li elements:

li {
    display: block;  
    width: 150px;  
    float: left;  
}

If you're looking for it to flow down first, then to the right, then there are some techniques for modern browsers involving the css3 column-count (only works in modern browsers):

ul {
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
}

Your third option would be to use two lists side-by-side,

Or, as you mention, divs.

Upvotes: 3

Related Questions